Icon now showing in my social widget

  • Resolved Chuckie

    (@ajtruckle)


    4 years, 4 months ago

    I am not sure what is going on here. Please look at my social widget in the footer using a browser and I see a square on the left. I am not sure why it is there.

    When I examine the widget HTML I have:

    <div class="fa-icons">
	<a href="xxx" rel="noopener noreferrer" target="">
	<i class="fa fa-facebook"></i></a>
	<a href="xxx" rel="noopener noreferrer" target="">
	<i aria-hidden="true" class="fa fa-youtube-play"></i></a>
	<a href="xxx" rel="noopener noreferrer" target="">
	<i class="fa fa-rss"></i></a>
</div>

    The widget is part of my paid “theme” and they no longer offer support after 6 months. The “theme” by default supports 4.7 icons. That is why the icons above are 4.7 versions.

    When I examine the CSS for fa-icons it has this style:

    .fa-icons:before {
    content: "\f86d";
}

    I have researched f86d and I see it is still valid:

    <i class="fas fa-icons"></i>

    Technically, I don’t understand why I even need this icon but I would like to not have this square showing. So either the icon or no icon.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Chuckie

    (@ajtruckle)

    4 years, 4 months ago

    The reason for this is because the theme was designed with Font Awesome 4.7. So notice this line above:

    <div class="fa-icons">

    By coincidence is is actually a reference of a new icon in Font Awesome 5. So the system is getting confused and trying to display this as a button. It isn’t actually supposed to be a button.

    I think at the time the author of the theme was simply assigning a class for the list of font-awesome icons in the widget and happened to use fa-icons.

    At the moment I am not sure of how I can change this class name to something else to stop the conflict.

    Plugin Author mlwilkerson

    (@mlwilkerson)

    4 years, 1 month ago

    Hello,

    I just released 4.0.0-rc15 which works a little differently from rc13. In the following, I’m going to refer things as they would be called in rc15. You may want to upgrade.

    Probably the best way to fix this is to use the Web Font technology with “version 4 compatibility” enabled, and try to block that conflicting version of Font Awesome from loading. This combination usually gets situations like that to work.

    To try and block the conflicting Font Awesome 4.7 from loading, you’d enable the conflict scanner from the Troubleshoot tab, then visit that page where you’re seeing the broken icon. If the scanner can detect the conflicting FA 4.7, it will save it to the bottom of that Troubleshoot tab. So you’d head back over there and “block” that detected conflict.

    Thread Starter Chuckie

    (@ajtruckle)

    4 years, 1 month ago

    Hi

    I have upgraded to your latest plugin. Although at the time your changelog had not caught up with rc15. Still said rc13.

    I can’t remember what i did now but I think I must have edited the original theme php files to construct the social icons list using v5 icons. I cam’t remember. I don’t intend on buying a new version of their theme.

    So I think we are good now.

    I have also changed my settings to use the latest icons set as that has a instagram icon and it all seems to work.

    Thanks.

    Plugin Author mlwilkerson

    (@mlwilkerson)

    4 years, 1 month ago

    OK, great.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Icon now showing in my social widget’ is closed to new replies.