WeaverCast 14 - Font Awesome
In this episode we review how you can use Font Awesome throughout your RapidWeaver projects. We review how you can import Font Awesome and then add it to both the content area as well as inside you menu items.
Letterpress Stack: https://joeworkman.net/rapidweaver/stacks/letterpress
Importing Font Awesome into your page
- Go to http://fontawesome.io/get-started/ and get the code you to put in your header.
- Take the code you copied, and paste it to the Page Inspector, under the Header tab, and under the smaller Header tab:
- You will want to change the URL a little bit, you need to add http: after the href” so that it will preview correctly in Rapidweaver.
- For any page you want to add Font Awesome to, you will need to add this code to the Page Inspector.
Adding Font Awesome icons to your page
Determine if your theme uses Font Awesome and which version, if it does not, make sure you have imported Font Awesome into your page (see above).
Find the icon you want to use in the list of icons. Depending on the version of Font Awesome you have, you will need to look at one of these two web sites:
- Font Awesome 4: http://fontawesome.io/icons/
- Font Awesome 3: http://fontawesome.io/3.2.1/icons/
Be sure you you choose the correct icon for the version you have on your site, as Font Awesome 3 icons will not work in Font Awesome 4 and vice versa.
Once you know the icon you are going to use, click on the icon to get the code for the icon. In this example, we will use the code from FA 4 and for the Home Icon.
As you will see from the screenshot the code for the Home icon is:
<i class="fa fa-home"></i>
Now paste this code into your page using alt-cmd-V (to paste as plain text), in a styled text area (text stack or styled text page type) and you will see your Font Awesome Home icon. Since we used a text stack, you can highlight the code and hold down command and push the plus (+) key and it will increase the size of the icon. Also, as it is highlighted, you can center the icon and change it’s color.
You can also add Font Awesome icons to the menu of your theme. Just put the code of the icon in the name of the page. If you want the icon and the name, add the name before or after the icon code.