How To Use Font Awesome In Muse

Did you know that you can easily use Font Awesome font icons in Muse as easy as in a common HTML website?

Adobe Muse is a great software for creating beautiful websites following the latest industry trends without knowing how to code. It is loaded with many useful widgets and it features an impressive font library from TypeKit.

If I had to name one downside Adobe Muse has, that would be its lack of a built-in icon font library. Thanks to Font Awesome this is not a problem any more!

But, why bother using an Icon Font when we can just drag and drop an image icon in our muse template? – You might be wondering. Well, the answer is very simple:

Using Icon Fonts in your web design process not only reduces website’s loading times dramatically, but also makes it future proof as font icons, unlike images, are fully responsive and retina friendly.

In case you’re unfamiliar, Font Awesome is a full suite of 519 pictographic icons, created and maintained by Dave Gandy, and licensed under the SIL OFL 1.1.

In this tutorial you’ll learn how to use and customize Font Awesome’s font icons in any Muse website. You’ll also learn how to add nice and smooth hover effects using a few lines of CSS. I assume that you are familiar with Muse so, I won’t focus on explaining how to use the software. Let’s get started!

1.Preparing our page

Obviously, the first thing we need to do is to open Adobe Muse and create a new site. Leave the default settings and hit OK. We just need a simple page for demo purposes. This will be the final result:

final-result

Go ahead and create those three text columns.

2. Setting up Font Awesome

Now it’s the time to set up Font Awesome (v.4.3.0 at the time writing – get the latest version here)! Setting up Font Awesome can be as simple as adding one line of code to our Muse website. You don’t have to download or install anything, just copy the code below and paste it into our website’s Master Page Properties metadata section.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Note: You will find our Master Page by navigating to the Plan View and double clicking the A-Masters thumbnail in the Masters section. Afterwards click Page → Page Properties.

setting-up-font-awesome

3. Adding our Icon Fonts

Navigate to Font Awesome icons page and choose the one you like most by clicking on it.

icon-library

Copy the code for the specific icon and simply right click and paste (or Command-V for Mac, Ctrl-V for Windows) the code anywhere into our Muse page . For our example I’ve chosen the cloud icon. That’s the code I used:

<i class="fa fa-cloud"></i>

icon-code

You should now have something that looks like this:

pasting-icon

Now we can make our icon look a bit better using the text options menu on your right hand side. Make sure the icon is selected (a bounding box appears around it) and go ahead and click that Text button to expand options.

customizing-icon

Let’s customize our icon by giving it a font size of 60px, a nice green color and make sure is center aligned. This is what you should have up until now:

icons-ready

That’s it! Pat yourself on the back for your very good looking icon fonts on your website!

But wait we’re not finished just yet. We will now add a nice hover effect with a smooth transition. We’re going to write a few lines of CSS so if you’re feeling adventurous keep on reading.

4. Adding hover effects

From the application menu click Page → Page Properties to open the Home page properties this time. Make sure the metadata tab is enabled because we are going to write some code in the <head> section of our page.

adding-css

Let’s start by wrapping our code in a <style> tag and center our icon to its parent container.


<style type="text/css">

i[class*="fa"] {
  width: 64px;
  height: 64px;
  line-height: 64px;
}

</style>

What i[class*="fa"] does is to select every <i> element which has a class that contains the word “fa”. In our case this line of code targets all Font Awesome icons, so if you wish to change our icon later you won’t have to style it all over again.

Now let’s add a nice green border and padding to give it some room.


<style type="text/css">

i[class*="fa"] {
  padding: 20px;
  border: 1px solid #22B573;
  width: 64px;
  height: 64px;
  line-height: 64px;
}

</style>

For the hover effect, we want to give our icon a zoom out effect. We will achieve this effect by altering its font-size from 60px to 48px. We also want to change its color and border color from green to black and its border from square to a nice circle. That’s the code so far:


<style type="text/css">

i[class*="fa"] {
  padding: 20px;
  border: 1px solid #22B573;
  width: 64px;
  height: 64px;
  line-height: 64px;
}

i[class*="fa"]:hover {
  font-size: 48px;
  color: #323232;
  border: 1px solid #323232;
  border-radius: 50%;
}

</style>

Great! But if you preview our page in your browser, you’ll notice that the animation is a bit harsh. Let’s fix this by adding a linear transition with a duration of 0.4s. Here is the final code:


<style type="text/css">

i[class*="fa"] {
  padding: 20px;
  border: 1px solid #22B573;
  width: 64px;
  height: 64px;
  line-height: 64px;
  transition: all linear 0.4s;
}

i[class*="fa"]:hover {
  font-size: 48px;
  color: #323232;
  border: 1px solid #323232;
  border-radius: 50%;
}

</style>

Pretty neat huh?

Conclusion

As you see it is really easy to implement Font Awesome to Adobe Muse and if you are willing to get your hands dirty with some code, then you can achieve very impressive results for your website, without affecting the loading times and without having to prepare all those big image files. Need a live example of an Adobe Muse page that uses Font Awesome? Here is a template I made for Themeforest.

Your turn! Did you enjoyed this tutorial? Do you have in mind any other Font Icons you’ve used in Muse? Let us know in the comments section below.

Share on LinkedInPin on PinterestTweet about this on TwitterShare on Google+Share on FacebookBuffer this page
Posted in: