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.

Font Awesome 4: http://fontawesome.io Font Awesome 3: http://fontawesome.io/3.2.1/

Letterpress Stack: https://joeworkman.net/rapidweaver/stacks/letterpress

Download RapidWeaver project file

After this podcast was recorded, we release a great Font Awesome stack that will make adding Font Awesome even easier!

Importing Font Awesome into your page

  1. Go to http://fontawesome.io/get-started/ and get the code you to put in your header.
    Font Awesome Weavercast
  2. Take the code you copied, and paste it to the Page Inspector, under the Header tab, and under the smaller Header tab:
    Font Awesome Weavercast
  3. 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.
  4. 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

  1. 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).

  2. 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.

  3. 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.

    Font Awesome Weavercast

    As you will see from the screenshot the code for the Home icon is: <i class="fa fa-home"></i>

  4. 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.

  5. 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.