blog-tutorial-post-template

Tutorials

The Font Awesome stack is free and you can download it here.

Font Awesome is a stack that allows you to use Font Awesome icons on any Stacks page. This is simply a importing tool to activate the use of Font Awesome. Some themes already have Font Awesome built-in, in which case you won’t need to add this to the page.

Setup

Font Awesome Importer Stack

1. Drag Font Awesome onto the Stacks page anywhere (it won’t display in preview or when the site is published). This allows you to start using Font Awesome.

Snippet File

2. Drag the Font Awesome snippet (or copy and paste it from below) into any text or html stack. Then change the class fa-medkit to any Font Awesome icon class name you wish to use – see full list here.

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

 

Important Note: Pay close attention to the quotation symbols. RapidWeaver’s auto formatting will sometimes change straight quotation symbols into curly ones . Curly quotes do not work inside HTML code. In order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternatively, whenever you select all of the code and apply Ignore Formatting to HTML code it will automatically change the curly quotes to straight quotes.

ignore formatting

Adjust Icon Size

To change the size of the icon you can use the code below, just adjust the font-size px value.

<i style="font-size:16px" class="fa fa-medkit"></i>

Note: Don’t forget to check to make sure your quotation marks are straight and not curly as mentioned in the Setup note above.

Add an HTML link

If you would like to add a link to the icon, you can use the code from below. In addition to changing the icon class name, you will just need to place the URL you want to link to in the href value.

<a href="http://yourlinkhere.com"><i style="font-size:16px" class="fa fa-medkit"></i></a>

Note: Don’t forget to check to make sure your quotation marks are straight and not curly as mentioned in the Setup note above.

Quotation Mark Issue Example

There is a common issue caused by RapidWeaver’s auto-formatting where quotation marks are changed.

RW Auto Formatting Quotations

In the gif above you’ll notice how the quotation mark on the right hand side is straight at first, but then when the letters next to it are changed, it turns into a curly quotation mark (even though Ignore Formatting has been enabled).

As mentioned before, in order to replace the curly quotes with the correct straight quotes you can select and delete them and then retype them in. Alternatively, whenever you select all of the code and apply Ignore Formatting (Keyboard Shortcut: cmd  . )to HTML code it will automatically change the curly quotes to straight quotes.

 

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Movable Windows

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

 

 

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software