Jump to content

HTML Tip 1: Adding Font Awesome


Morrigan
 Share

Recommended Posts

  • Admin

Font Awesome is a great way to add cool icons without having to bog your site down with images. The even cooler part is that you can change their color, their size and have cool spinning icons and everything. You can read more about Font Awesome on their site:

 

http://fontawesome.io/

 

It's pretty easy to add it to your site. You can either host it yourself or you can use a CDN (Content Delivery Network) link. The easy option is to use a free CDN and enter it into the <head> bit of your skin.

 

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

(You are free to simply copy the above link into your HTML.

 

Then you can get cool icons like what we have up in the header of the Initiative site by using things like this:

<i class="fa fa-bath" aria-hidden="true"></i>

 

I personally love to use these as macros as they are clean and simple and you can make them any size with an extra class or a span around the icon.

 

More in a future tip.

  • Thank you 1

0_mainsignature.jpg

image.png

Profile set made by myself and original Artwork by Fae Merriman, my daughter.

 

 

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.