The Icon shortcode handles a generic icon. Here is a live example:

The icon shortcode, shown above, is defined by the following definition:

[g-icon icon=envelope][/g-icon]

By default Icon shortcode uses the default Bootstrap Glyphicon icons set, but you can use fontawesome as well:

The icon shortcode, shown above, is defined by the following definition:

[g-icon icon=twitter icon_type="fontawesome"][/g-icon]

You can easily manage the icon by the icon_attributes property:

[g-icon icon=twitter icon_type="fontawesome" icon_attributes="class:fa-2x"][/g-icon]
[g-icon icon=twitter icon_type="fontawesome" icon_attributes="class:fa-3x"][/g-icon]
[g-icon icon=twitter icon_type="fontawesome" icon_attributes="class:fa-4x"][/g-icon]

Shortcode parameters

The [g-icon] shortcode has some optional parameters:

  • name - defines an unique component name.
  • icon_type - defines the icon set type. By default it displays glypicons icons and accepts fontawesome as alternative icon set.
  • icon - defines the icon name without any prefix.
  • attributes - defines extra attributes you can add to your shortcode. Attributes is a string of HTML key:value tokens, separated by commas. A valid attributes value is attributes=class:myclass, rel:my-rel".

Next Post Previous Post