Styling Icons (perhaps with Font Awesome)

Tagged: 

Author Posts

robertlo October 16, 2015 at 1:22 pm

I created a class so that I can add an icon to certain links. I did that with the background, no repeat and add padding. However, this is a link, not plain text, that has the icon in front of it. So I also set a hover color for it.

Of course the icon is just a png, so it’s not changing color with the text. So my question is… Is it possible to use Font Awesome in MT as a background image so that it will change color with the text when any part of the link is hovered over?

If not Font Awesome or via the background, is there some other way to do that?

Or will I just need to add the font awesome class in the html of the page, and then place that and the text of the link in my <span> tags, which are then styled by MT?

Abland October 16, 2015 at 1:56 pm

Hi, Robert,

You can use FontAwesome in your styles by including pseudo before or after and the content property. Say a link with class, my-link, with phone icon to the left:

a.my-link:before {
    content: "\f095";
    font-family: FontAwesome;
}

Just add more style rules for color, hover, etc.

The list of codes is here:
https://fortawesome.github.io/Font-Awesome/cheatsheet/

robertlo October 16, 2015 at 2:36 pm

OK. So I will have to manually add the code. There’s no way in MT’s GUI to add it, right?

robertlo October 16, 2015 at 3:02 pm

So I tried that. I created a new class called .download-link-2

And I used this custom css in MT:

.download-link-2:before {
content: “\f019”;
font-family: FontAwesome;
}

But as you can see on the second product at https://preachnet.com/freeindeed/ all it did was actually add f019 before the anchor text of the link. What am I doing wrong?

Thanks

Abland October 16, 2015 at 3:21 pm

I’m getting an error on your page that font types were blocked because they were served over http instead of https – formidable fonts?

Abland October 16, 2015 at 3:31 pm

I also don’t see which link you tried it on – I must be looking at the wrong page because the class isn’t in there when I search the source.

robertlo October 16, 2015 at 3:31 pm

No formidable fonts (that I’m aware of), but I do have an ssl on the site, but I’m using it on admin and checkout pages

robertlo October 16, 2015 at 3:38 pm

The link with class download-link-2 is on the second product called Achieving Kingdom Greateness. The exact link is just above the price.

Sebastian October 17, 2015 at 7:08 am

Hi Robert,

I don’t think I can help you with this font issue unfortunately. I’m still getting the old problem of not being able to load your site in https. And this now extends to loading it with regular http too. I can’t view your site at all.

robertlo October 27, 2015 at 11:56 pm

sorry for the late reply. I have not idea why you can’t view my site. I am having no problems viewing the site or logging in from any devices, and I have worked on multiple. No problems over here. Can you send me a screenshot of what you’re seeing now, and I will send it to my host.

But regarding my font issue, as far as you know, is the following css exactly correct, or do I have something wrong:

.download-link-2:before {
content: “\f019”;
font-family: FontAwesome;
}

Thanks,
Rob

Sebastian October 28, 2015 at 2:38 pm

Hey Rob,

I can see the site now on http. But it’s still got those shortcodes all over the place.

I’ve just released version 4.5.6 of MT that fixes an issue with backslahes (\) being stripped out. \f019 was ending up as f019 in the stylesheet. If you upgrade, you may find it works now. I’ve also added a content CSS property field to the behaviour property group. If you set the font-family to:

FontAwesome

And the content field value to:

"\f019"

You should be able to apply font awesome via the UI options now. Please ensure that you use plain double-quotes, copying and pasting can sometimes lead to stylised quotes that won’t work.

Please let me know how you get on.

Cheers!
Sebastian

robertlo October 28, 2015 at 3:41 pm

I updated the plugin, but that didn’t fix it. I then removed the custom css I added to try your new content css option.

I created a selector for <span class=”download-link-2″>. The html on the page is:

<span class=”download-link-2″>Download This Sermon</span>

I set the font to font awesome. I also entered “/f019” in the Content field for Behavior. But that didn’t add the icon.

It also changed the actual font of the text “Download This Sermon” to something like Times New Roman. To avoid that, do I need to change the html to:

<span class=”download-link-2″> </span>Download This Sermon

And what about “/f019” in the Content field for Behavior not generating the down arrow icon it should? I assume I am doing something wrong.

Sebastian October 29, 2015 at 10:21 am

Hey Robert,

I just managed to revive my old laptop and access your site without (it seems) getting an old cached version. This should make troubleshooting easier.

Viewing your HTML source code, it appears that the font-awesome CSS file comes after Microthemer’s active-styles.css file. This may be the cause of the problem.

I also wondered if you have remembered to add :before to the selector now that you are trying to apply the content property via the UI? The fact that your styles changed the actual font of the text “Download This Sermon” suggests that the :before pseudo selector might be absent.

Also, are you working on your homepage or another page?

Cheers,
Sebastian

robertlo October 30, 2015 at 7:42 pm

Sebastian,

I did not have :before, but I added that. That fixed the font issue, but /f019 is still showing instead of the actual icon on the page.

And the page I am working on is the shop page, which is also the home page of this site.

Abland October 30, 2015 at 8:45 pm

ahem – excuse me gentlemen 🙂

Robert, are you using a forward slash? “/f019”
– it should be a backslash: “\f019”

robertlo October 31, 2015 at 1:11 am

Ah. My apologies for the mistake. It is working fine now. Thanks so much.

Sebastian October 31, 2015 at 9:09 am

Thanks Abland – glad you sorted it Robert!

You must login or register to reply to this topic.