Font Awesome Icon Font Shortcode plugin

BUY NOW!

Supports all Font Awesome icons built into PageLines DMS

Introduction

Welcome to the information page for the Icon Font Shortcode Plugin for PageLines.

I wrote this plugin because I loved the idea of icon fonts (infinitely scalable, high resolution retina, etc.) but hated having to switch between the Visual and Text editors or having to Google search for the code to type in if I didn’t use them frequently.

Additionally, I wanted some pre-defined stylings to have at my disposal and to keep a consistent look.

There’s a buy button above and at the bottom. It takes you to the product page, at which you can complete your purchase or make comments. If you’ve already purchased the PageLines theme and this plugin, “Thank You!”

Benefits

  • Icon fonts are infinitely scalable, looking great on high resolution Retina screens.
  • Now the icon font HTML code is simpler to use, via a WordPress shortcode.
  • No more switching between Visual and Text editor, losing your place, losing focus on the content.
  • No more remembering icon font syntax and avoid HTML syntax errors.
  • Displays an in-line error message to Contributors and higher level users (nothing is displayed to Subscribers and site visitors) if the icon font shortcode was used properly (i.e. opened and closed the shortcode) but didn’t include an icon. Helps identify intended but inaccurate usage.
  • Supports screen readers (used by sight-impaired people), specifying that the icon is not actually text and should be ignored.
  • See where you’ve placed the icons in your content, since the icon font HTML code doesn’t show up in the Visual Editor.
  • Turn any icon into a link and define your own link target.
  • Use icon font shortcodes within PageLines’ shortcodes (e.g. Bootstrap buttons).
  • Supports all Font Awesome icon fonts.
  • Easily and quickly control icon color and font size via shortcode.
  • Includes over a dozen types of built-in stylings (LESS-ified), including:
    • Invert the colors (icon becomes the theme’s chosen background color and gets a background with the theme’s chosen font color).
    • Opacity/Transparency controls.
    • Includes many background colors and a rainbow background (just for fun, really).
    • Make any of the backgrounds have rounded corners or be a circle.
    • Add a shadow to the icon (not its background).
    • Outline/Stroke the icon instead of having it completely filled in (only supported by webkit browsers as of March 2013).
    • Even rotate the icons any number of degrees, with built-in intervals every 30 degrees and every 45 degrees (e.g. 30, 60, 90, etc. and 45, 90, 135, etc.).
  • Includes a PageLines Site Options settings page to easily add global shortcode IDs, classes, and/or icon link classes.
  • PageLines Site Options settings page also provides quick access to the Font Awesome icons, example usage, and the plugin’s documentation (this page).
  • Add your own classes and IDs to each shortcode.
  • Works with any PageLines theme or child theme (since PageLines version 2.3, which is when the Font Awesome icon font was added).
  • Buy from the PageLines Shop and you can use it over and over again for all of your and your clients’ sites.

Examples / Demo

  • Supports all Font Awesome icon classes, even spinning
  • Built for ease of use! Can use any color, any font-size, or use your own ID and class to customize further
  • Includes some built-in styling, or add your own via child theme or PageLines custom code
  • Icon fonts look great at any size and are pixel-perfect on retina / high-DPI displays
  • So easy it’s like magic
  • Saves time and helps avoid typing errors. Worth a few bucks.
  • Secure! All shortcode input is sanitized to make sure no scripts can accidentally or maliciously run within the shortcode.
  • The newest PageLines Shop shortcode plugin. Hot, hot, hot!
  • Works everywhere in WordPress Visual Editor and Text Editor: posts, pages, custom post types
  • Even works in widgets!
  • Download from PageLines Shop, install, and activate
  •  A 5-star plugin

[i fontsize="150%"]icon-spinner icon-spin[/i]<br />
[i color="brown"]icon-pencil[/i]<br />
[i]icon-gift[/i]<br />
[i color="#F660AB"]icon-fullscreen[/i]<br />
[i]ophalf icon-magic[/i]<br />
[i color="green" fontsize="200%"]icon-money[/i]<br />
[i color="red"]bgwhitesmoke icon-ambulance[/i]<br />
[i fontsize="175%"]icon-fire bgfire rounded[/i]<br />
[i color="blue"]icon-globe[/i]<br />
[i color="grey"]icon-cogs[/i]<br />
[i]icon-cloud-download[/i]<br />
[i color="yellow"]icon-star bgblack[/i][i color="yellow"]icon-star bgblack[/i][i color="yellow"]icon-star bgblack[/i][i color="yellow"]icon-star bgblack[/i][i color="yellow"]icon-star bgblack[/i]

Another Set of Examples

Icon Button
[pl_button type="primary" link="http://www.pagelines.com/shop/plugins/icon-font-shortcode/" target="blank" size="large"][i color="#F660AB" fontsize="2em"]icon-bolt icon-large icon-spin[/i] Icon Button[/pl_button]

[i]icon-asterisk[/i]

[i fontsize="100px"]icon-ok[/i]

[i fontsize="200%" color="yellow"]icon-ok[/i]

[i fontsize="xx-large"]icon-ok[/i]

[i color="green"]icon-ok icon-2x[/i]

[i]icon-remove icon-border[/i]

[i color="rgba(255, 0, 0, 0.2)"]icon-remove[/i]

[i color="hsla(240, 100%, 50%, 0.4)"]icon-facetime-video[/i]

[i color="red" fontsize="50px"]icon-flag pull-right[/i]

[i color="blue"]icon-certificate icon-4x icon-spin[/i]

[i color="blue"]icon-certificate icon-3x[/i]

[i color="orange"]icon-leaf[/i]

All Built-In Stylings

Following are all the built-in stylings (i.e. all the classes), using the ‘icon-search’ icon with fontsize=”200px”:

Error message:

Icon Font Shortcode error message screenshot

No styling:

Link (with hover):

Inverse colors (dependent upon PageLines settings for background/base color and text color): 

Dark-base (dependent upon PL settings for background/base color): 

Light-base (dependent upon PL settings for background/base color): 

Opacity:

  • None (i.e. transparent): 
  • 25%: 
  • 50%: 
  • 75%: 

Backgrounds:

  • Black (without changing icon’s color): 
  • Black (with color=”aqua”): 
  • White (no effect when page background is also white): 
  • Gray: 
  • Lime: 
  • Maroon: 
  • Navy: 
  • Aqua: 
  • Orange: 
  • Deep Pink: 
  • Deep Sky Blue: 
  • Midnight Blue: 
  • Slate Gray: 
  • Snow: 
  • Tomato: 
  • White Smoke: 
  • Yellow Green: 
  • Highlight (from Bootstrap): 
  • Fire (Red to Orange Gradient): 
  • Rainbow (ROYGBIV Gradient): 

Background Styles (using orange background):

  • Rounded Corners:
    • Rounded: 
    • Rounded More: 
    • Rounded Lots: 
  • Circle: 

Text Shadow (i.e. Icon Shadow) Light:

  • Text Shadow: 
  • Text Shadow More: 
  • Text Shadow Lots:
  • Text Shadow Huge: 

Text Shadow (i.e. Icon Shadow) Dark:

  • Text Shadow Dark: 
  • Text Shadow Dark More: 
  • Text Shadow Dark Lots:
  • Text Shadow Dark Huge: 

Outline:

  • Outline: 
  • Outline 2: 
  • Outline 3: 
  • Outline 4: 
  • Outline 5: 
  • Outline 6: 
  • Outline 7: 
  • Outline 8: 
  • Outline 9: 
  • Outline 10: 

Rotate (in 30 degree increments):

  • Rotate 30 degrees (same as -330 degrees): 
  • Rotate 60 degrees (same as -300 degrees): 
  • Rotate 90 degrees (same as -270 degrees): 
  • Rotate 120 degrees (same as -240 degrees): 
  • Rotate 150 degrees (same as -210 degrees): 
  • Rotate 180 degrees (same as -180 degrees): 
  • Rotate 210 degrees (same as -150 degrees): 
  • Rotate 240 degrees (same as -120 degrees): 
  • Rotate 270 degrees (same as -90 degrees): 
  • Rotate 300 degrees (same as -60 degrees): 
  • Rotate 330 degrees (same as -30 degrees): 

Rotate (in 45 degree increments):

  • Rotate 45 degrees (same as -315 degrees): 
  • Rotate 135 degrees (same as -225 degrees): 
  • Rotate 225 degrees (same as -135 degrees): 
  • Rotate 315 degrees (same as -45 degrees): 

Flip over y-axis (flip over x-axis can just use ‘rotate180’):

No styling: [i fontsize=”200px”]icon-search[/i]</p>
<p>Link (with hover): [i link="#demo" fontsize="200px"]icon-search[/i]</p>
<p>Inverse colors (dependent upon PageLines settings for background/base color and text color): [i fontsize=”200px”]icon-search inverse[/i]</p>
<p>Dark-base (dependent upon PL settings for background/base color): [i fontsize=”200px”]icon-search darkbase[/i]</p>
<p>Light-base (dependent upon PL settings for background/base color): [i fontsize=”200px”]icon-search lightbase[/i]</p>
<p>Opacity:</p>
<ul>
<li>None (i.e. transparent): [i fontsize=”200px”]icon-search opnone[/i]</li>
<li>25%: [i fontsize=”200px”]icon-search op25[/i]</li>
<li>50%: [i fontsize=”200px”]icon-search op50[/i]</li>
<li>75%: [i fontsize=”200px”]icon-search op75[/i]</li>
</ul>
<p>Backgrounds:</p>
<ul>
<li>Black (without changing icon’s color): [i fontsize=”200px”]icon-search bgblack[/i]</li>
<li>Black (with <em>color=”aqua”</em>): [i color="aqua" fontsize="200px"]icon-search bgblack[/i]</li>
<li>White (no effect when page background is also white): [i fontsize=”200px”]icon-search bgwhite[/i]</li>
<li>Gray: [i fontsize=”200px”]icon-search bggray[/i]</li>
<li>Lime: [i fontsize=”200px”]icon-search bglime[/i]</li>
<li>Maroon: [i fontsize=”200px”]icon-search bgmaroon[/i]</li>
<li>Navy: [i fontsize=”200px”]icon-search bgnavy[/i]</li>
<li>Aqua: [i fontsize=”200px”]icon-search bgaqua[/i]</li>
<li>Orange: [i fontsize=”200px”]icon-search bgorange[/i]</li>
<li>Deep Pink: [i fontsize=”200px”]icon-search bgdeeppink[/i]</li>
<li>Deep Sky Blue: [i fontsize=”200px”]icon-search bgdeepskyblue[/i]</li>
<li>Midnight Blue: [i fontsize=”200px”]icon-search bgmidnightblue[/i]</li>
<li>Slate Gray: [i fontsize=”200px”]icon-search bgslategray[/i]</li>
<li>Snow: [i fontsize=”200px”]icon-search bgsnow[/i]</li>
<li>Tomato: [i fontsize=”200px”]icon-search bgtomato[/i]</li>
<li>White Smoke: [i fontsize=”200px”]icon-search bgwhitesmoke[/i]</li>
<li>Yellow Green: [i fontsize=”200px”]icon-search bgyellowgreen[/i]</li>
<li>Highlight (from Bootstrap): [i fontsize=”200px”]icon-search bghighlight[/i]</li>
<li>Fire (Red to Orange Gradient): [i fontsize=”200px”]icon-search bgfire[/i]</li>
<li>Rainbow (ROYGBIV Gradient): [i fontsize=”200px”]icon-search bgrainbow[/i]</li>
</ul>
<p>Background Styles (using orange background):</p>
<ul>
<li>Rounded Corners:
<ul>
<li>Rounded: [i fontsize=”200px”]icon-search bgorange rounded[/i]</li>
<li>Rounded More: [i fontsize=”200px”]icon-search bgorange roundedmore[/i]</li>
<li>Rounded Lots: [i fontsize=”200px”]icon-search bgorange roundedlots[/i]</li>
</ul>
</li>
<li>Circle: [i fontsize=”200px”]icon-search bgorange circle[/i]</li>
</ul>
<p>Text Shadow (i.e. Icon Shadow) Light:</p>
<ul>
<li>Text Shadow: [i fontsize=”200px”]icon-search textshadow[/i]</li>
<li>Text Shadow More: [i fontsize=”200px”]icon-search textshadowmore[/i]</li>
<li>Text Shadow Lots: [i fontsize=”200px”]icon-search textshadowlots[/i]</li>
<li>Text Shadow Huge: [i fontsize=”200px”]icon-search textshadowhuge[/i]</li>
</ul>
<p>Text Shadow (i.e. Icon Shadow) Dark:</p>
<ul>
<li>Text Shadow Dark: [i fontsize=”200px”]icon-search textshadowdark[/i]</li>
<li>Text Shadow Dark More: [i fontsize=”200px”]icon-search textshadowdarkmore[/i]</li>
<li>Text Shadow Dark Lots: [i fontsize=”200px”]icon-search textshadowdarklots[/i]</li>
<li>Text Shadow Dark Huge: [i fontsize=”200px”]icon-search textshadowdarkhuge[/i]</li>
</ul>
<p>Outline:</p>
<ul>
<li>Outline: [i fontsize=”200px”]icon-search outline[/i]</li>
<li>Outline 2: [i fontsize=”200px”]icon-search outline2[/i]</li>
<li>Outline 3: [i fontsize=”200px”]icon-search outline3[/i]</li>
<li>Outline 4: [i fontsize=”200px”]icon-search outline4[/i]</li>
<li>Outline 5: [i fontsize=”200px”]icon-search outline5[/i]</li>
<li>Outline 6: [i fontsize=”200px”]icon-search outline6[/i]</li>
<li>Outline 7: [i fontsize=”200px”]icon-search outline7[/i]</li>
<li>Outline 8: [i fontsize=”200px”]icon-search outline8[/i]</li>
<li>Outline 9: [i fontsize=”200px”]icon-search outline9[/i]</li>
<li>Outline 10: [i fontsize=”200px”]icon-search outline10[/i]</li>
</ul>
<p>Rotate (in 30 degree increments):</p>
<ul>
<li>Rotate 30 degrees (same as -330 degrees): [i fontsize=”200px”]icon-search rotate30[/i]</li>
<li>Rotate 60 degrees (same as -300 degrees): [i fontsize=”200px”]icon-search rotate60[/i]</li>
<li>Rotate 90 degrees (same as -270 degrees): [i fontsize=”200px”]icon-search rotate90[/i]</li>
<li>Rotate 120 degrees (same as -240 degrees): [i fontsize=”200px”]icon-search rotate120[/i]</li>
<li>Rotate 150 degrees (same as -210 degrees): [i fontsize=”200px”]icon-search rotate150[/i]</li>
<li>Rotate 180 degrees (same as -180 degrees): [i fontsize=”200px”]icon-search rotate180[/i]</li>
<li>Rotate 210 degrees (same as -150 degrees): [i fontsize=”200px”]icon-search rotate210[/i]</li>
<li>Rotate 240 degrees (same as -120 degrees): [i fontsize=”200px”]icon-search rotate240[/i]</li>
<li>Rotate 270 degrees (same as -90 degrees): [i fontsize=”200px”]icon-search rotate270[/i]</li>
<li>Rotate 300 degrees (same as -60 degrees): [i fontsize=”200px”]icon-search rotate300[/i]</li>
<li>Rotate 330 degrees (same as -30 degrees): [i fontsize=”200px”]icon-search rotate330[/i]</li>
</ul>
<p>Rotate (in 45 degree increments):</p>
<ul>
<li>Rotate 45 degrees (same as -315 degrees): [i fontsize=”200px”]icon-search rotate45[/i]</li>
<li>Rotate 135 degrees (same as -225 degrees): [i fontsize=”200px”]icon-search rotate135[/i]</li>
<li>Rotate 225 degrees (same as -135 degrees): [i fontsize=”200px”]icon-search rotate225[/i]</li>
<li>Rotate 315 degrees (same as -45 degrees): [i fontsize=”200px”]icon-search rotate315[/i]</li>
</ul>
<p>Flip over y-axis (flip over x-axis can just use ‘rotate180’):</p>
<ul>
<li>[i fontsize=”200px”]icon-search flip[/i]</li>
<li>[i fontsize=”200px”]icon-pagelines flip[/i]</li>
</ul>
<p>

Limitations / FAQs

Which of the included stylings are not cross-browser compliant?

Following is a list of currently-known browser styling limitations (excluding references to IE 8 and lower):

Built-In Styling TypeCompatibilityNotes
Inverse coloringAll
LinksAll

If you put an icon inside a link of your own, like:

<a href="">[i]icon-home[/i] Link Text Here</a>
then it'll get the @pl-link color (usually blue).

If you use the shortcode's link="" attribute, the icon will not look like a link until hovering over it.

Note: If you specify a color in the shortcode, the link color and hover color will be overruled.

BackgroundsSee NotesMore complex background stylings (e.g. rainbow) may require a more modern browser, (like IE10+) to support CSS Linear-Gradient, but all other backgrounds (i.e. single color) are supported by all browsers.
Backgrounds - CircleMost browsers (IE9+)CSS Border-Radius
Backgrounds - Rounded BordersMost browsers (IE9+)See "Backgrounds - Circle"
Opacity / TransparencyMost browsers (IE9+)CSS Opacity
Icon ShadowMost browsers (IE10+)CSS Text-Shadow
Icon Outline / StrokeMost browsers (IE10+)Most browsers (IE10+) can get 1px outline, but only webkit (Chrome and Safari) can have an outline width wider than 1px.
Icon RotationOnly Firefox, Chrome, and IE10+Although browser support for CSS Transform is good (IE9+), rotating a CSS pseudo element (like an icon font icon) is not well supported.

Which of the included stylings cannot be used by themselves?

Some of the included stylings affect only the background. As such, if you would need to add a background styling before the following built-in stylings will be noticeable:

  • Rounded corners background
  • Circle-shape background

How are icons that are links styled?

Icon font links are styled like this:

  • The icon is displayed in the theme’s chosen font color.
  • Hovering over the linked icon changes the color to the theme’s chosen link color.
  • The icon link never gets underlined.

All icon font links get an “iconfont” CSS class by default, but you can change it in the PageLines Site Options if you want to specify your own styling for all icon font links.

How can I add my own stylings?

If you want to add your own styling:

  1. Every word (separated by spaces) between the shortcode gets added as an additional class, which you can leverage to add your own stylings.
  2. Additionally, you can use the shortcode’s id attribute, if you wish to add an ID.
  3. You can also go to the PageLines Site Options settings to add a global ID or class (or multiple, separated by a space) if you wish to apply the same styling to all icons generated by the shortcode.
  4. Once your selectors are as desired, just add your CSS rules to your child theme’s style.less or style.css file -or- add your CSS rules to your PageLines Custom Code (located at PageLines -> Site Options -> Custom Code)

Usage / How-To

Now it’s as easy as typing this into your Visual Editor or anywhere else shortcodes can be used:

[i]icon-asterisk[/i]

which generates this HTML code:

[span8 pad=”zmb”]
<i class=”icon-asterisk”></i>
[/span8]

And outputs like this:

Simple Styling

The shortcode can accept color and fontsize parameters, like this:

Color attribute

[span8 pad=”zmb”]
[i color="green"]icon-ok[/i]
[/span8]

which generates this HTML code:

[span8 pad=”zmb”]
<i style=”color:green;” class=”icon-ok”></i>
[/span8]

And outputs like this:
You can use any valid CSS color properties, like these:

  • #00ff00
  • white
  • rgb(17, 50, 200)
  • rgba(255, 0, 0, 0.3)
  • etc.

FYI: The shortcode’s color attribute only accepts CSS values, not LESS CSS values/variables.

Fontsize attribute

[span8 pad=”zmb”]
[i fontsize="100px"]icon-ok[/i]
[/span8]

which generates this HTML code:

[span8 pad=”zmb”]
<i style=”font-size:100px;” class=”icon-ok”></i>
[/span8]

And outputs like this:
You can use any valid CSS font-size properties, like these:

  • 250%
  • 1.6em
  • 30px
  • small
  • larger
  • xx-large
  • x-small
  • etc.

Additionally, Font Awesome has its own classes built in.

You might prefer to use this:

[i]icon-ok icon-2x[/i]

instead of this:

[i fontsize="200%"]icon-ok[/i]

It’s your choice!

Note the shortcode’s fontsize attribute does NOT have a hyphen (i.e. use fontsize, not font-size).

Advanced Styling

You can even add your own CSS IDs and/or classes to style in your child theme or PageLines Custom Code, with CSS or LESS. Here’s how to:

[i id="whateveryouwant anotheridhere"]icon-asterisk myownclass myownsecondclass[/i]

which generates this HTML code:
<i id=”whateveryouwant anotheridhere” class=”icon-asterisk myownclass myownsecondclass”></i>

Built-In Styling

The plugin includes many built-in styles to easily control many aspects of icon font stylings.

See the Examples section above for a demo of each.

Purchase

The Icon Font Shortcode plugin is easy to use and really helps make the icon fonts accessible anywhere in your posts, pages, custom post types, widgets, and anywhere else you can use shortcodes. No more HTML code or switching between Visual and Text editors. Plus, easily style them with CSS ids and classes.

When you buy from the PageLines Shop, you can buy once and use it on all of your and your clients’ sites forever, including all future updates, if any. Plus, PageLines makes it super easy to install. Then you just go to your list of WordPress Plugins and click the “Activate” button.

Any questions, feel free to contact me.

BONUS: When you buy, install, and activate the Icon Font Shortcode plugin (on PageLines Framework, v2), you also get code to copy and paste into your child theme’s style.less file to enable icon font icons as your site-wide bullets (i.e. unordered lists), just like you see in use on the v2 demo page. It’ll be right inside your PageLines Site Options for you to copy.

 You read all that? Now you have to get it!  Buy the Icon Font Shortcode plugin now!