i3dTHEMES Rasa Tutorial and Design Series

Rasa Dreamweaver Tutorials: Social Icons and Fontawesome

 In this week’s tutorial series, we cover working with the social icons and the FontAwesome icon set.



Updating FontAwesome


Tutorial: Step by Step

Fontawesome is a fantastic set of ‘font’ icons you can use to spice up the content of your web pages. You can also updated it as the folks over at fontawesome are often adding new icons.

The fontawesome icons are linked into your pages via a link to a content delivery network (for faster loading of your icons). You can update this link at any time, or if you need one of the new icons that fontawesome has included in a new release.

If you go to the fontawesome website you can see which version they are currently up to ( usually posted just below the big Download button ).

Compare this to your version to see if you need or even can, update.

how to update to the latest version of fontawesome
  • open any page in your template
  • search for a link similar to
    <link href=”http://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css” rel=”stylesheet” type=”text/css”>
  • you’ll see the version number that you are currently using, in this example we’re using 4.6.1
  • select the entire link and copy it
  • with the link still selected, press the ( Ctrl +H for Microsoft / Ctrl/Cmd + F for Dreamweaver ) to open the find and replace panel
  • you should have the selected link in the find field, if not paste it in there
  • in the replace field, paste the link in there, then change the current version numbers ( in this case 4.6.1 ) to the latest version ( 4.7.0 ) for example .. select Entire Site, or All Pages and code view.. then update.

** if you’ve never used the find and replace tool in your editor, it’s a great time saving tool, but it will make permanent changes.

I recommend you make a backup of your website first, and follow the video demonstration to the right if you’re never done this before.

Tutorial: Video Demonstration


Working with FontAwesome


Tutorial: Step by Step

Sometimes it’s better to just defer to folks who already have great information on a subject and this is just the case here, Sitepoint has a great article on icon fonts, and explains what they are and how to use them so I suggest you read this article if you want to learn more about font icons:

An Introduction to Icon Fonts with Font Awesome and IcoMoon

Then head over to the fontawesome website to see some of the more advanced examples of things you can do with the fontawesome icons

Fontawesome Examples

Tutorial: Video Demonstration


Updating the Social Icons


Tutorial: Step by Step

If you’ve reviewed the previous materials on this page you will realize by now that we are using fontawesome icons for the Social Icons in your web pages, and not a graphic or SVG.

We use fontawesome icons because social networks are popping up all over the place and fontawesome is continually updating their icon sets. If we were to use a graphic icon, once the set is created, it’s not likely new icons will be added at the same pace as fontawesome can provide.

The social icons we use in the template use the fontawesome <i> tag for icon, are wrapped in a link tag <a> then wrapped in a bullet list. When you open the social-icons library page, you’ll need to switch to code view to make changes and you’ll also notice at that time, the social icons are using an unordered list to keep the formatting.

You can tell which icon is what by reading the icon name in the list, for example you ( fa-facebook ) for facebook.

To determine the icon name, when you visit the fontawesome website first go to the icons page ( http://fontawesome.io/icons/ ) find the icon you want to use, the name beside it is the actual name you’ll be copying.. but you can also click on the icon, which opens a page with the complete icon link included.

opening the social icons library page for editing
  • open the Library / shared / social-icons page
  • switch to Code view
top remove an icon
  • select the entire <li> tag
  • delete
top add an icon
  • select an existing <li> tag
  • copy
  • paste
  • update the icon name

**additional info

Tutorial: Video Demonstration


How many is too many


Tutorial: Step by Step

The positioning of the icons plays a big part in how many icons you can comfortably fit into the page. Icons displayed horizontally will usually have more room while icons displayed vertically will have less room to grow. In most of our templates we’ll provide 5 icons as the default number but you may want to grow that to 10 or 12 if you’re highly active in social media.

Either way it’s always best to preview your updates using the Google Chrome web browsers developer tools, so you can preview in desktop, tablet and mobile.

If you can’t fit a larger number of icons comfortably into the current arrangement, then create a section in your home page and include all your links.


Previewing for desktop / tablet and mobile views


Tutorial: Step by Step

As you build your website it’s best to preview as you go to make sure your web pages look good on desktop, tablet and mobile. We used to see a large number of developers building websites for clients that would contact us for support, mentioning their clients had viewed the site on their iPhone, and something doesn’t look right.

As mobile first became popular the only way to really check was on the device itself, now there are tools that will mimic the view of an iPhone, iPad, or many of the Android phones and tablets. You don’t need to wait until someone views the site on a specific device you can check yourself and save some potentially negative feedback from your client or visitors.

Google Chrome is the tool I recommend as it already has a huge library of developer plugins and also includes a developer tool for previewing web pages in a mobile or table view, and it also allows you to customize the device list so you can select a preview mode that mimics a specific device and version.

The Google Developers website already has a great and detailed article on this if you just want to read up on it:

https://developers.google.com/web/tools/chrome-devtools/device-mode/


Repositioning to the bottom or right side of the page


Tutorial: Step by Step

The Social icons are positioned vertically on the home ( index ) page, and horizontally on the template pages. There isn’t room on the template pages to position them differently, but on the home page, you can position the icons horizontally if you need to.

There are 2 positions for the social icons on the home page, while in desktop resolutions, the icons are positioned vertically and to the left. At lower tablet and mobile resolutions the icons are re-positioned to the bottom and center and also change from vertical to horizontal as there is a bit more room for them.

You can change the alignment from vertical to horizontal for desktop mode as well, and even position them to the bottom center.