Your Source for Premium Adobe Muse Templates, Widgets and Tutorials

Blog

Using Font Awesome icon fonts in Adobe Muse.

Watch the video...


Read the article...

We have all seen them the really cool icon fonts. If you have not then take a look at the amazing set over at font awesome - http://fortawesome.github.io/Font-Awesome/ 

The beauty of iconfonts is that they are in essence, fonts. Which means they can be used much like any other piece of text. They can have their colour changed easily, can be scaled and are lightweight in download terms.

The huge choice available at Font Awesome means that you should find the exact graphic you are looking for and when combined with other muse assets you can quickly and easily build buttons, graphics and widgets.

In this article we will take you through the process of adding the Font Awesome code to you Adobe Muse site and then how to include individual icons into your design and how to style them.

Lets get started.

First off head over to the font Awesome site if you have not already done so and take a look at the vast array available to you - http://fortawesome.github.io/Font-Awesome/icons/

FIG 1 - The Font Awesome website (At time of writing)

Clicking on one of the icons you will see how they can be scaled. You will also see the HTML code for the icon. So we can see from the outset that we will need to get our hands a little bit code grubby in Muse to implement icon fonts. Don't worry it’s real easy.

Step One: Adding the code to your Adobe Muse project.

Open Adobe Muse as you normally would and in this instance lets create a new site to get the hang of how to use the fonts, then we can add the code to existing sites with ease.

FIG 2 - Adding a new site to Adobe Muse

Lets grab the code that will allow us to use the Font Awesome iconfonts in our site. You can find it on the Font Awesome site on the “Getting started” page or just copy and paste it from here.

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

FIG 3 - Selecting the code from the Font Awesome Site


You will notice that the link is a CSS stylesheet link hosted on a CDN ( Content Distribution Network) this is great as it means we do not need to upload any files to a server as they are being pulled directly from a server. 

The downside is that you do need to be working online if you want to preview the icons whilst working with them. Also note that Muse may slow down whilst working with iconfonts due to re-rendering each time you adjust the fonts.

That being said its still a very easy process.

Now we have the code lets open the properties of the Master page in Muse to add the code.

Right click on the master page and choose Page Properties from the options.

FIG 4 - Selecting the code from the Font Awesome Site

Then go to the Meta Data tab in the panel and paste the code into the HTML for <head>" area of the panel. This will add the code to all subsequent pages you build in Muse using that Master.

FIG 5 - Adding the Font Awesome code to the Master page <head> area

Close the panel and thats it. You can now start adding iconfonts to the page.


Step Two: Adding iconfonts to the page.

Next open the Home page in your Muse Plan area. Go back to the Font Awesome site and click on the first icon the “icon-compass” and grab the following code:

<i class="icon-compass"></i>

FIG 6 - Selecting the iconfont code

Next paste it anywhere on the page. After a second or two, whilst Muse makes the connection to the the CDN, the icon will appear on the page.

You have now added an iconfont to the page.

FIG 7 - The iconfont on the page

Step Three: Changing the properties of the icon.

Select the iconfont you have just placed on the page and go to the text controls in Muse.

Use the font size tool to change the size of the icon ( there will be a slight pause as Muse renders the font). Notice how the font has resized and has kept its quality as it is a vector font.

FIG 8 - The resized icon

Now change its colour with the font colour picker.

FIG 9 - The icon with colour

Note you can alter the size of the bounding box to match the dimension if you wish. Note also that the spacing and other text setting will not affect the icons.

Step Four: Adding a link and rollover effect to the icon.

You can add a link the the icon by selecting its bounding box and using the hyperlink tool. However this method does not allow you to use the Hyperlinks colours with the icon. Not to fear there is a work around.

Right click on the font and choose Edit HTML and wrap the icon code in the following 

This at the beginning: <a href="your link here"> and this </a> at the end (replace the ‘your link here’ with the full URL to wherever you want to link to.

FIG 10 - The link code

Your code should look something like this.

<a href="http://www.musegrid.com"><i class="icon-compass"></i></a>

Now its time to apply the link style to get the rollover effect.

Open the Hyperlinks tool and choose the Edit Link Styles then create a new style similar to this:

FIG 11 - Creating the link code

Once created select the iconfont and choose the Text Link Style from the menu.

FIG 12 - Choosing the link style

Now preview the icon with File > Preview Page In Browser

You now have an iconfont with a rollover colour effect.

Thats the basics covered now its time for you go and explore what you can do with Font Awesome Icon Fonts.

Happy Museing.