Social media and arrow button error when translating the page

  • erychist

    (@erychist)


    3 years, 4 months ago

    I have issue with arrows and social media buttons when switching to translated page.(using translatepress, posted topic there but no help what so ever)
    original page is : erychist.com/about
    translated page is : https://erychist.com/ru/about/ (not yet translated fully, just test, but font i am switching to is identical and supports Russian letters)
    As you can see in the left corner, my social media icons show squares instead of showing social media platform, same affects arrows for drop down menus .
    Anytthing i can do with it ?
    I tried few fonths, and it looks like this issue is not with the font.
    Is there any css i can put , so social media icons and arrows (down the page u can see contact and media kit buttons with square instead of arrow icon ) wont be touched and will remain the same as original ?

    CSS i used to make this font work for translated pages :
    body.translatepress-ru_RU *{
    font-family: ‘bebasrus’,serif;
    }

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • George Appiah

    (@gappiah)

    3 years, 4 months ago

    It’s a font issue.

    Note that the social media icons are not images: they are generated with CSS (using Font Awesome fonts).

    And it sees the font specification on the translated page is overwritng the Font Awesome font that generates the social media icons.

    (Click to see a larger image)

    George Appiah

    (@gappiah)

    3 years, 4 months ago

    Try this for the social media icons (APPEARANCR => CUSTOMIZE => ADDITIONAL CSS):

    .fab {
    font-family: "Font Awesome 5 Brands" !important;
}

    And for the bullet icons (arrows):

    .fas {
    font-family: "Font Awesome 5 Free" !important;
 }
    Thread Starter erychist

    (@erychist)

    3 years, 4 months ago

    @gappiah i had thoughts that still it might be a font issue, but i was just curious why original page had those icons appearing as it is.
    So i just tried what u suggested me , and it seems that it works!!!!!! Thanks a lot dude ! I will keep this topic for another day, if i will see some other issues with font from translatepress overwriting something – i will tag you in and ask for code if you will know, as i am total 0 with these codes tbh.

    For now, thanks a lot , u are the only one who replied in such a short time! <3

    Thread Starter erychist

    (@erychist)

    3 years, 4 months ago

    @gappiah Hey mate, once again here with one little question.
    As i translated everything, everything looks fine apart of some Heading text , for example this one :
    https://snipboard.io/HWmjwC.jpg

    as you can see on translated webpage : https://erychist.com/ru/
    it has different font again . This is H2 heading text, i think H1 also have the same issue.
    Is there a code to make it work for this in particular?
    Thanks a lot , hopefully you wiwll answer it )

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Social media and arrow button error when translating the page’ is closed to new replies.