Topbar Content Issues with Font Awesome Icons & Styling

Support
#1

I have a weird problem. I want to add a contact number and email in the topbar with a phone and envelope icon respectively.
On one site it looks like I want it to, on another the icons don’t show and the link is underlined with a dotted line instead of the normal link styling.

I have added in the content area
+261 81 123 4567 &nbsp [email protected]

Thing is, it used to work fine on that site as well. Where could be the issue?

#2

Hi There,

Thank you for writing in, most probable its a CSS styling conflict. Please provide us the site URL where you’re having the issue so we can take a look. And please provide us a mock-up design (screenshot) of how do you want it to looks like.

Cheers!

#3

The url is http://flow.com.na/
I want it to look like this, minus the girly font.

#4

Hello @AugustIvy,

Thanks for writing in! Regarding this particular situation, there are a couple of things to keep in mind when using Font Awesome icons in the theme:

Icon Class Names

We do not use the fa-* classes that come with Font Awesome by default. Instead, all icons used in the theme are prefixed with x-icon-*. However, this leads us to the second point…

Use data-x-icon Instead

We no longer use icon specific classes (e.g. x-icon-phone) in the theme in an effort to save space in the theme’s stylesheets. Previously, we did have a class like this for every icon available; however, it creates unnecessary bloat when at most people typically use a few icons at a time on a page and don’t need an entire list like that just taking up valuable filesize. Instead, you can do the following:

<i class="x-icon" data-x-icon="&#xf095;" aria-hidden="true"></i>

This is the current markup format used for Font Awesome icons throughout the theme. All you need to do is add the x-icon class, then include the data-x-icon="&#x____;" attribute. What you will need to do is find the unicode value of the icon you want to use, and replace the ____ with that value. You can find the unicode value for each icon by going to the icon list page on Font Awesome’s website, and click through on an icon you want to add. Let’s say you want to add the phone icon, you could go to that page and find where it says unicode on that page. You’ll notice that the unicode value for the phone icon is f095, which you can then use in conjunction with the data-x-icon attribute to output properly. Remember that you must keep the &#x before and ; after the unicode value you place in between. If you do not format the data-x-icon attribute properly, the icon will not be output. This is the manual way to do all this, but of course it can all be formatted for you automatically using…

The [x_icon] Shortcode

Everything mentioned above is done behind the scenes if you use the [x_icon] shortcode. For instance, using our phone icon example, you would enter [x_icon type="phone"], and the proper markup will be generated for you. However, shortcodes cannot always be used everywhere, which is why you may need the markup as mentioned previously. And finally, there is one more option…

Legacy Stylesheet

If you find that you absolutely must use the legacy Font Awesome classes (e.g. x-icon-phone), you can include our legacy font class stylesheet by including the following line of code into your child theme’s functions.php file:

add_filter( 'cornerstone_legacy_font_classes', '__return_true' );

Again, this is not advised as it will add a significant amount of stylesheet filesize to your website’s loaded resources, but we provide this filter to use if you wish to work this way.

Hopefully this helps to point you in the right direction, cheers!