Added Font-Awesome to Custom.css

data66 · July 2016

Ok. Designer I am not . However, my site partner is so before I go throw this on the site (without him knowing of course, how else can I sneak stuff on it?), figured to ask the gurus again here first.

I put the entire font-awesome css in the custom.css file at the end (commented so he knows what it is when he flips out). I've got it on a development site first. My need for using font-awesome was that old Like this app as we really miss having a Like button to like or thank a post. Only thing is, it didn't show a little icon next to the number of likes - it showed a little empty box thingy <- technical term there.

Anyway, works fine with font-awesome the way I did it but I didn't know if that's the proper way to load it. I couldn't figure out how to make it load the font-awesome style sheet. If that's not the right way, any hints as to how to load it properly for my custom theme?

So, here is a print screen of what it looks like (get binoculars to see the little thumbs up (will make it bigger later). Good, bad or ugly?
http://prntscr.com/bos28w

vrijvlinder · July 2016

My need for using font-awesome was that old Like this app as we really miss having a Like button to like or thank a post. Only thing is, it didn't show a little icon next to the number of likes - it showed a little empty box thingy <- technical term there.

Yes, I actually fixed it and added the missing parts but the author never updated it. Since the Like This plugin is obsolete I guess.

The Yaga application works really great and has all the icons. And you can configure the reactions as you wish and call them what you want.

Anyway, works fine with font-awesome the way I did it but I didn't know if that's the proper way to load it. >I couldn't figure out how to make it load the font-awesome style sheet. If that's not the right way, any >hints as to how to load it properly for my custom theme?

There are instructions in the font awesome website. You basically download the files and add them to the root of your forum or your custom theme folder .

Once you have the files and know their location, edit the parts that require the path to the files and then use the CSS rules to add the font icon to whatever you want.

vrijvlinder · July 2016

You can add to the head of the default.master.php of your theme the necessary links to the css file and the font. Make sure you add all the files that you download from font awesome to the forum folder or the theme folder. The important thing is to point the urls to the right path to the files.

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

vrijvlinder · July 2016

Here is a quick plugin I threw together which will add the font awesome library to your forum.

Then all you need to do is use the CSS rule for your element that you want an icon for

.myelement::before{
content: "\f003";
}

vrijvlinder · July 2016

You can also add the font face to the theme custom.css after you enable the plugin by using this to call the font without the need for the font awesome css however you would need to style the font with font size etc.

@font-face {
font-family: 'FontAwesome';
src:url('plugins/FontAwesome/fonts/fontawesome-webfont.ttf') format('truetype'); 
src: url('plugins/FontAwesome/fonts/fontawesome-webfont.eot') format('embedded-opentype'),
url('plugins/FontAwesome/fonts/fontawesome-webfont.woff') format('woff'),
url('plugins/FontAwesome/fonts/fontawesome-webfont.woff2') format('woff2'),
url('plugins/FontAwesome/fonts/FontAwesome.otf')format('opentype'),
url('plugins/FontAwesome/fonts/fontawesome-webfont.svg') format('svg');
}

You can add the icons using css on the element by adding a ::before to the element if you want the icon before the element or use ::after if you want it after the element .

span.Tag.Tag-Announcement::before{
content: "\f29b";
padding:2px;
margin-right: 3px;
font-size:20px;
}

data66 · July 2016

Wow that's some great info @vrijvlinder ! I'll check into all of your suggestions. I did put all of the font-awesome stuff in, but I had copied the css into the custom.css. Your way sounds much better since you know what you're doing and I've a ways to go before I learn Vanilla Forums the way I know phpFox. Thanks a bunch for your help.

Will check that plugin on my local in the morning after work. Sounds great!

R_J · July 2016

When all you need is one icon, you really shouldn't include an icon font in your page. Icon fonts have two main advantages: an icon is scalable and all images are packed into one file, which makes less http requests, which is better for your site performance.

When you need one icon only, the advantage of having many pictures in one big file is getting a disadvantage. Adding one picture only would be the right way to go. You can find "like" images here: http://iconmonstr.com/?s=Like
Picture are also provided as SVG, which are scalable by definition, so there remains no reason to use an icon font.

If you would like to add them as css only, you could include them as data urls. Read about that method here: https://css-tricks.com/data-uris/

By the way: if someone would try to convince me that adding font-awesome to my page is a necessity or even a good idea, just because he wants to use one icon from that file, I would stop letting him work on my css immediately.

data66 · July 2016

@R_J said:
When all you need is one icon, you really shouldn't include an icon font in your page. Icon fonts have two main advantages: an icon is scalable and all images are packed into one file, which makes less http requests, which is better for your site performance.

When you need one icon only, the advantage of having many pictures in one big file is getting a disadvantage. Adding one picture only would be the right way to go. You can find "like" images here: http://iconmonstr.com/?s=Like
Picture are also provided as SVG, which are scalable by definition, so there remains no reason to use an icon font.

If you would like to add them as css only, you could include them as data urls. Read about that method here: https://css-tricks.com/data-uris/

By the way: if someone would try to convince me that adding font-awesome to my page is a necessity or even a good idea, just because he wants to use one icon from that file, I would stop letting him work on my css immediately.

Thanks for those tips, since I'm not a designer at all, it's not something I knew. I'll have the designer make one for it then. I hadn't even told him I was doing this. I'm sure it would mess up his responsive stuff. Thanks for raising those points before I did this on the live site. He's gotten used to the "I Love Lucy" in me though, by now. I can imagine if he saw this post, he would be shaking his head then, if it's a bad idea to do that for just one icon.

I'm sure though that the tips above for the font-awesome stuff, and the plugin will still be useful for other areas or for replacing icons and for other users looking to implement font-awesome for their sites. I still do like font-awesome - I used it in apps I made for phpFox as it's got built-in support by default.

R_J · July 2016

Bootstrap and Font-Awesome are like hammer and screwdriver nowadays: unbelievable versatile, easy to handle and very helpful! But sometimes you need a saw or a pair of tweezers and then you're lost

vrijvlinder · July 2016

I guess forget it then , if you are only using it for one icon it is overkill I thought you wanted to use the font for all your theme. That is why I went through the trouble of making a plugin. I should have consulted R_J....

data66 · July 2016

@vrijvlinder said:
I guess forget it then , if you are only using it for one icon it is overkill I thought you wanted to use the font for all your theme. That is why I went through the trouble of making a plugin. I should have consulted R_J....

No need to be upset as it will come in very handy. This theme is special for that site. We've other clients that will need this as I'm referring more to Vanilla. I am very sure many will love your plugin and I do appreciate your assistance here.

The support we offer for all scripts via a personal company will definitely bring in clients here and I will make sure to point them to this plugin as font-awesome is quite nice.

data66 · July 2016

@vrijvlinder said:

My need for using font-awesome was that old Like this app as we really miss having a Like button to like or thank a post. Only thing is, it didn't show a little icon next to the number of likes - it showed a little empty box thingy <- technical term there.

Yes, I actually fixed it and added the missing parts but the author never updated it. Since the Like This plugin is obsolete I guess.

The Yaga application works really great and has all the icons. And you can configure the reactions as you wish and call them what you want.

Anyway, works fine with font-awesome the way I did it but I didn't know if that's the proper way to load it. >I couldn't figure out how to make it load the font-awesome style sheet. If that's not the right way, any >hints as to how to load it properly for my custom theme?

There are instructions in the font awesome website. You basically download the files and add them to the root of your forum or your custom theme folder .

Once you have the files and know their location, edit the parts that require the path to the files and then use the CSS rules to add the font icon to whatever you want.

Holy wow Batman! That YAGA is awesome! Just put it on my local and it's so cool! I hope it will work in upcoming 2.3. Thanks for recommending it.

Added Font-Awesome to Custom.css

Comments