font-awesome-icons

FontAwesome Icons

We take advantage of the FontAwesome icon set. Learn how to update the icons in your site.

Tips


Instructions

Updating the ‘Fontawesome’ icon

In this tutorial, we’ll demonstrate how to add, remove or replace thefontawesome icons used in your menu bars, and page / paragraph headings. The icons displayed with your main Nav buttons are loaded in via the ‘fontawesome‘ font collection. You can change the existing icon to one of over 300 options. To read about fontawesome and see which icons are available visit the fontawesome website to begin with…

The Font Awesome folks are constantly updating and adding more icons, there’s a good chance that there are more recent versions of Font Awesome available from their website. You can download the most recent package, and copy them into your template. The font-awesome files are stored in the ( Site / styles / font-awesome ) folder. Just download the most recent version of Font Awesome from their website, extract and copy the contents of the ‘font-awesome’ folder, into your websites ‘font-awesome’ folder.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/ptUT8hhMElw

Remove a ‘fontawesome’ icon

  1. Open your page, or Library page
  2. Locate the text associated with the icon ( button, heading ) ..  you won’t see the icon in the design window, they are visible in the web browser only
  3. Select the text associated with the icon ( button or heading )
  4. Switch to code view
  5. you’ll notice the selected text, is still selected in the code view, this makes it easier to find the icon tag
  6. Right click on the <i class=”icon-name”> tag
  7. Click Select Tag
  8. you’ll notice the entire <i class=”icon-ellipsis-horizontal”></i> tag has been selected in the code view
  9. with this tag still selected, press the Delete key on your keyboard
  10. you’ll find this method of selecting and deleting tags to be the cleanest

Change the ‘fontawesome’ icon

  1. determine which icon you would like to use (example here)
  2. icons are displayed by using their icon name in the class=” ” selector
  3. the example page above gives a full listing of the icon names you can use
  4. Open your page ( or Library page ).
  5. Locate the text or link associated with the icon.
  6. Select the text and switch to code view
  7. Locate the <i class=”icon-name”></i> ( icon-name used for this example only, your page will display an actual font awesome icon name )
  8. Change the existing “icon-name” to match your new “icon-name”
  9. you can find the complete list of icon names right here
  10. Font-Awesome/icons

Updating the ‘Fontawesome’ icon

In this tutorial, we’ll demonstrate how to add, remove or replace thefontawesome icons used in your menu bars, and page / paragraph headings. The icons displayed with your main Nav buttons are loaded in via the ‘fontawesome‘ font collection. You can change the existing icon to one of over 300 options. To read about fontawesome and see which icons are available visit the fontawesome website to begin with…

The Font Awesome folks are constantly updating and adding more icons, there’s a good chance that there are more recent versions of Font Awesome available from their website. You can download the most recent package, and copy them into your template. The font-awesome files are stored in the ( Site / styles / font-awesome ) folder. Just download the most recent version of Font Awesome from their website, extract and copy the contents of the ‘font-awesome’ folder, into your websites ‘font-awesome’ folder.

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/ptUT8hhMElw

Remove a ‘fontawesome’ icon

  1. Open your page, or Library page.
  2. Locate the text associated with the icon ( button, heading ) ..  you won’t see the icon in the design window, they are visible in the web browser only.
  3. Select the text associated with the icon ( button or heading ):
  4. Wwitch to code view.
  5. You’ll notice the selected text, is still selected in the code view, this makes it easier to find the icon tag.
  6. Click on the word “class” in the <i class=”icon-name”></i> tag
  7. Then click on the selected tag in the Quick Tag Selector Toolbar.
  8. You’ll notice the entire <i class=”icon-ellipsis-horizontal”></i> tag has been selected in the code view.
  9. With this tag still selected, press the Delete key on your keyboard.
  10. You’ll find this method of selecting and deleting tags to be the cleanest.

Change the ‘fontawesome’ icon

  1. determine which icon you would like to use (example here)
  2. icons are displayed by using their icon name in the class=” ” selector
  3. the example page above gives a full listing of the icon names you can use
  4. Open your page ( or Library page ).
  5. Locate the text or link associated with the icon.
  6. Select the text and switch to code view.
  7. Locate the <i class=”icon-name”></i> ( icon-name used for this example only, your page will display an actual font awesome icon name ):
  8. Change the existing “icon-name” to match your new “icon-name”
  9. You can find the complete list of icon names right here:
  10. Font-Awesome/icons