Font Awesome Icon Macro

Version 11.1 by Oana Florea on 2017/02/09 15:55

imagesInsert a scalable icon from the Font Awesome set
TypeXAR
Category
Developed by

Sergiu Dumitriu

Rating
2 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

Description

The Font Awesome Icons macro facilitates the usage of the scalable and highly customizable icons provided by Font Awesome.

Usage examples

{{icon name="cogs"/}}

{{icon name="skype" size="2x"}}Skype me!{{/icon}}

{{icon name="star"/}}{{icon name="star"/}}{{icon name="star"/}}{{icon name="star-half-o"/}}{{icon name="star-o"/}}

(% class="fa-stack" %){{icon name="square" cssClass="fa-stack-2x"/}}{{icon name="terminal" cssClass="fa-stack-1x fa-inverse"/}}(%%)

{{icon name="spinner" title="Loading..." size="4x" cssClass="fa-spin"}}Please stand by...{{/icon}}

 

 Skype me!

     

  

 Please stand by...

Parameters

name (mandatory)
The name of the icon to use. The Font Awesome Icons directory provides an exhaustive list of currently supported icons. The name to be used as a parameter for the icon macro should be one of the names on this list stripped of the icon- prefix. For example, to display icon-code, use {{icon name="code"/}}. The {{icon}} macro defines several additional icon aliases which can be used:
delete
fa-times
public
fa-unlock
private
fa-lock
size
The size of the icon, as supported by Font Awesome. The supported sized are large (33% increase), 2x, 3x, 4x. See also Examples | Larger icons on the FontAwesome website.
title
A title to display when hovering the icon.
cssClass
Any number of CSS classes that may help improve the styling of the icon in a specific context. The values used in this parameter can be any of the CSS classes defined by the Font Awesome stylesheet (see examples) or can be classes defined in any other active stylesheet.

Macro content

The macro content is optional. If non-empty, it will be displayed as the text immediately to the right of the icon (inline) and will inherit the style applied to the icon via custom CSS classes (see the cssClass parameter).

Important note

The macro uses a stylesheet and font definition hosted on a remote server. Some browsers or browser extensions (e.g. NoScript for Firefox) may block resources hosted remotely for security reasons. In order to view Font Awesome Icons correctly, please advise users to configure their browsers to allow external resources from netdna.bootstrapcdn.com.

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v1.1

Version 1.1 updated the used version of FontAwesome to 4.1.0.

    

Get Connected