1LD Tutorials & Blogs

Tutorials

Font Awesome Pro

Font Awesome Pro

The pro version allows customization of the Font Awesome icons. You still need the free version to activate Font Awesome (if your theme doesn’t have it running already). After Font Awesome is activated/imported Font Awesome Pro’s customization options will work.

Note, occasionally fonts may not appear in Edit Mode and often saving the page will cause a reload and then display the icons correctly.

Category: Allows you to select from Font Awesome’s icon categories that they have on their website. Depending on the category you select will depend on what icons appear available in the next drop-down menu. The categories include Web Applications, Form Controls, Currencies, Text Editor, Directional, Video Player, Brand Icons, Medical, and Manual. I added the manual icon in case you want to skip locating the icon in the drop-down menu and simply type in the icon name as found on their website here.

Icon URL On: Make available the following field ‘Icon URL’ which you can type in any URL that will wrap only around the Font Awesome Icon (including any padding and borders you have added).

Icon Size: Pixel size of the icon.

Icon Color: Color of the Font Awesome Icon

Icon Shadow: Sets a text shadow to the Font Awesome Icon (this is not needed if you select the ‘Flat Icon Shadow’ further down).

Shadow Color: Color of the text shadow.

Shadow Amount: Control over the direction and blur of the shadow (x, y, blur).

Flat Icon Shadow: Enables the flat shadow effect you can see on our preview page.

Fade On: Sets the flat shadow to fade if turned on.

Flat Direction: South East, South West, North East, North West.

Icon Background: Enables a background color (following option).

Bg Color: Adds a color to the background behind the icon, though this will not display well without adding some padding and possibly a border (in options bel0w).

Add Section for Text: Creates a Stack’s text section. Note that these may not appear to well unless you float the icon left or right (in options below) or if you center the icon (also in the options below).

Add Section for Stack: Creates an empty Stack’s section (slice) where you can add other stacks in.

Float Direction. Sends the icon left or right, which is most useful when a Stack or Text section is added.

Center Icon. Centers the icon.

Icon Padding amounts (top, right, bottom, left): Adds space between the icon and its outer edges. If a border is used it will display on the outer most edge of the padding and background color will also fill this space.

Icon Margin amount (top, right, bottom, left): Adds space between the icon and surrounding elements. This is most useful when a Stack or Text section is added – you will want to add space so that they are not so close together.

Turn Border On: Adds a border allowing you to control the width, radius (round corners) and color.

Second Border: Adds another border on the outside allowing you to control the width, radius (round corners) and color.

Changelog

v2.0.0 (June 23, 2014)

  • Includes all new Font Awesome 4.1 icons including new categories
  • Removed a few duplicate Font Awesome items

v1.1.10 (Apr 9, 2014)

  • Fixed 4 directional icons calls

v1.1.9 (Apr 3, 2014)

  • Added option to control fade distance

v1.1.8 (Feb 5, 2014)

  • Vimeo fixed

v1.1.7 (Feb 3, 2014)

  • URL Option added for URL to open in a new tab
  • Rotate Hover added
  • Transition Speed Controls (in/out)
  • Size Hover Added
  • Flat Shadow Hover Removed (currently not supported)
  • URL Default changed from empty to “http://”
  • Corrected Mispellings

v1.0.3 (Jan 29, 2014)

  • New Icon added
  • Added option to add a URL to the icon
  • Fixed built-in breifcase icon

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

Scroll Shift Stack

Scroll Shift Screenshot

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

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

RapidWeaver is a trademark of Realmac Software