Social Links – icons not displaying

  • Resolved lider84

    (@lider84)


    11 months, 1 week ago

    Today updated my theme from 1.1.6 to 1.1.7 and wordrpress from 6.1.x to 6.4.2. I noticed that social icons were not displayed – kind of X cross. I copied saved previously theme folder – it didnt help. Icons still broken. Seems that WP version has something into this subject.

    I checked fontawesome.com page and they have new 6.5.1 icon version. With this one they have new syntax: instead previous “fa-church” (which worked before my update) you add some atribue like regular, thin, light: “fa-regular fa-church”. Non old or new format worked.

    As I couldnt have desired icons I found working ones in “brand” tab. Better than nothing.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Theme Author Alexander Agnarson

    (@alxmedia)

    If you use icons that are not in the brands category, you need to add this in Customize > Additional CSS for each icon that is not:

    .social-links i.fa-heart { font-family: "Font Awesome 6 Free"; font-weight: 900; }

    All themes currently use Font Awesome 6.4.2.

    Thread Starter lider84

    (@lider84)

    Hi Alexander,

    above didnt work for me

    I copied the code into “Appearance / customize / additional css” then I went to “Appearance / customize / theme options / social links” and used “fa-regular fa-image” and other non brand images. Still I got X on preview. I log off and in. Deleted cookies and refreshed. No change. Maybe I do something wrong

    Theme Author Alexander Agnarson

    (@alxmedia)

    Try writing only fa-image in the field.

    Also try clearing cache, and force-refresh the page by pressing CTRL+F5.

    Thread Starter lider84

    (@lider84)

    Nope. I tried “fa-image” and “fa-regular fa-image”?and result is same: X instead icon. I cleaned cash / deleted cookies. I just wonder, how does theme fetch icon by just “fa-image” reference? Maybe WP version has something to do with it?

    Theme Author Alexander Agnarson

    (@alxmedia)

    If you check in functions.php on line 363, you will see:

    { $icon = 'class="fab ' .esc_attr( $item['social-icon'] ). '"'; } else $icon = '';

    So, for social links, it adds:

    class="fab fa-"

    And then adds the icon name. So for example, when you fill in fa-facebook in the field, the code result is:

    <i class="fab fa-facebook"></i>
    Thread Starter lider84

    (@lider84)

    Brands like “facebook, wordpress, twitter” work well. Whenever I change those to generic: “images, house, user” it does not load icons. Maybe as they are in different semantic/category now, they are not fetched by theme (functions.php): old far fa-images, new fa-refular fa-images ? I looked here:

    https://fontawesome.com/v5/docs/web/reference-icons/

    Theme Author Alexander Agnarson

    (@alxmedia)

    If you use any icon that is a non-brand one, you need to add this line of CSS for each icon. Lets say you want to add fa-image. Then you need to add this in Customize > Additional CSS:

    .social-links i.fa-image { font-family: "Font Awesome 6 Free"; font-weight: 900; }
    Thread Starter lider84

    (@lider84)

    Yes. Success. As you suggested, for each non-brand icon I prepared spearate code and all icon display well!

    Thanks for support!

    Theme Author Alexander Agnarson

    (@alxmedia)

    Glad you got it to work! ??

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Social Links – icons not displaying’ is closed to new replies.

Tags