Hi. Just noticed that my added icons using the are no longer working. I read a few articles and note that things have changed (font-awsome / X) in how this works now?
I am adding icons to labels in forms and can’t user short codes. Using the above used to work. What am I missing?
Thank you
Just noticed a second but related icon issue using short code for linkedin [x_icon type=“linkedin-square” style=“color: #4097d9; font-size: 28px; padding: 0 5px 0 0;”] - see screenshot
use case is a href=“https://www.linkedin.com/company/xxxxxxxx”/ target="_blank">[x_icon type=“linkedin-square” style=“color: #4097d9; font-size: 28px; padding: 0 5px 0 0;”]
Thoughts? Thank you
Hello @dsthompson,
Thanks for writing in!
When we release X theme 4.0 (https://theme.co/changelog/#theme-x-4-0-0), we have updated the icons and updating the markup of these icons is fairly simple. For example, let’s say that you have an icon in your navigation that is outputting the home graphic. This might look something like the following based on previous versions of the shortcode’s output:
<i class="x-icon-home"></i>
Moving forward, the first thing you would need to do is find the unicode representation of this icon. To do that, you can simply go to Font Awesome’s icon list and find the icon you want and click on it. For this example, we’re looking for the home icon, which will ultimately take you to this page. Below the icon examples we see the unicode value for this icon is f015. We can now take this value and update the markup like so:
<i class="x-icon-home" data-x-icon=""></i>
We keep the x-icon-home class because the CSS now looks for any class attribute that contains a class with a string of x-icon- anywhere in the attribute. If it sees this string of characters, it will know you want to output an icon and will look to the data-x-icon attribute for the content of this icon. This also allows us to quickly see that we intend for this to be a home icon, but the important part to remember here is that the label doesn’t do anything here, just the x-icon- substring.
Regarding the data-x-icon attribute, we can see that our unicode value of f015 is prefixed by &#x and suffixed by a ;. This is important so that the CSS knows how to work with this value properly. If these values are not present, the unicode string will be output instead of the intended icon and will appear broken.
And in the latest release, we updated it again to accommodate the changes in Font Awesome 5.0. In the latest version, Font Awesome was updated. This involved changing markup css and file locations.
Kindly check all files in your child theme (if you have made any changes) and replace all instances of data-x-icon with icon attribute to one of the following:
data-x-icon-b for social icons.
data-x-icon-o for outline icons.
data-x-icon-s for solid icons.
The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency.
eg. Change this
<i class="x-icon-bars" data-x-icon=""></i>
with this
<i class="x-icon-bars" data-x-icon-s=""></i>
Hope this helps.
Thanks. Great explanation. Will give it a try now.
Let us know how this goes!
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.