Font Awesome Icon Macro
Insert a scalable icon from the Font Awesome set |
Type | XAR |
Category | |
Developed by | |
Active Installs | 67 |
Rating | |
License | GNU Lesser General Public License 2.1 |
Table of contents
Description
The Font Awesome Icons macro facilitates the usage of the scalable and highly customizable icons provided by Font Awesome.
Usage examples
{{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 (<v1.2) or maxcdn.bootstrapcdn.com (>=v1.2).
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:
- Log in the wiki with a user having Administration rights
- Go to the Administration page and select the Import category
- Follow the on-screen instructions to upload the downloaded XAR
- Click on the uploaded XAR and follow the instructions
- You'll also need to install all dependent Extensions that are not already installed in your wiki
Release Notes
v1.2
Version 1.2 updated the used version of FontAwesome to 4.7.0.
v1.1
Version 1.1 updated the used version of FontAwesome to 4.1.0.