1. Home
  2. Docs
  3. Confluence
  4. Confluence User Macros
  5. Fontawesome 5

Fontawesome 5

Summary

This Confluence user displays a Font Awesome 5 icon with many options for customization. It requires that you load the Fontawesome fonts in your instance.

Loading Fontawesome

  1. Login as administrator
  2. Go to “General Configuration”, then select “Custom HTML” from the menu on the left
  3. Click the “Edit” button
  4. Select text box “At end of the HEAD”
  5. Add this line and click Save:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Source Code

#* ============================================================================
 * FONT AWESOME 5
 *
 * This Confluence user macro displays a Font Awesome 5 icon with many options
 * for customization.
 *
 * Version: 1.0.001
 * Date:    2018-10-02
 * Author:  George Lewe
 * Source:  https://github.com/glewe/font-awesome-5
 * License: GNU LGPLv3
 *
 * Macro body: None
 *#

#* ----------------------------------------------------------------------------
 * PARAMETERS
 *#
## @param Type:title=Icon Type|type=enum|enumValues=regular,solid,brand|desc=Select the icon type.<br><span style="margin-right:4px;" class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></span><span style="color:#990000;">Make sure the type fits the icon name you enter below.</span>|default=solid
## @param Icon:title=Icon Name|type=string|desc=Enter the name of the icon you want to display.<br><span style="margin-right:4px;" class="aui-icon aui-icon-small aui-iconfont-warning confluence-information-macro-icon"></span><span style="color:#990000;">Make sure the name fits the icon type you select above.</span><br>Find icon names here:<ul><li><a href="https://fontawesome.com/icons?d=gallery&s=brands&m=free" target="_blank">Font Awesome Brand Icons</a></li><li><a href="https://fontawesome.com/icons?d=gallery&s=regular&m=free" target="_blank">Font Awesome Regular Icons</a></li><li><a href="https://fontawesome.com/icons?d=gallery&s=solid&m=free" target="_blank">Font Awesome Solid Icons</a></li></ul>|default=paper-plane
## @param Size:title=Icon Size|type=enum|enumValues=xs,sm,lg,1x,2x,3x,5x,7x,10x|desc=Select the relative icon size.|default=1x
## @param Border:title=Icon Border|type=boolean|desc=Use this switch to draw a border around the icon.|default=false
## @param Alignment:title=Icon Alignment|type=enum|enumValues=inherit,left,right|desc=Select the alignment of the icon.|default=inherit
## @param Rotate:title=Icon Rotation|type=enum|enumValues=none,90,180,270|desc=Select a rotation of the icon in degrees here.|default=none
## @param Flip:title=Icon Flip|type=enum|enumValues=none,horizontal,vertical|desc=Select a flip direction of the icon here. Flipping an icon will overwrite rotation.|default=none
## @param Animation:title=Icon Animation|type=enum|enumValues=none,spin,pulse|desc=Select spin to get any icon to rotate, and use pulse to have it rotate with 8 steps.|default=none
## @param Color:title=Icon Color|type=string|desc=Enter the hexadecimal color code here, e.g. 000000 = black, ffffff = white. Default is "inherit".|default=inherit

#* ----------------------------------------------------------------------------
 * DEFAULTS
 *#
#set ($faIcon="fa-paper-plane")
#set ($faType="fas")
#set ($faSize="")
#set ($faBorder="")
#set ($faAlignment="")
#set ($faRotate="")
#set ($faFlip="")
#set ($faAnimation="")
#set ($cssColor="inherit")

#* ----------------------------------------------------------------------------
 * INPUT
 *#

#* Icon *#
#if ($paramIcon)
   #set ($faIcon="fa-$paramIcon")
#end

#* Style *#
#if ($paramType == "regular")
   #set ($faType="far")
#elseif ($paramType == "brand")
   #set ($faType="fab")
#end

#* Color *#
#if ($paramColor)
   #set ($cssColor="$paramColor")
#end
 
#* Relative Size *#
#if ($paramSize != "1x")
   #set ($faSize="fa-$paramSize")
#end
 
#* Border *#
#if ($paramBorder==true)
   #set ($faBorder="fa-border")
#end
 
#* Alignment *#
#if ($paramAlignment == "left")
   #set ($faAlignment="fa-pull-left")
#elseif ($paramAlignment == "right")
   #set ($faAlignment="fa-pull-right")
#end
 
#* Rotation *#
#if ($paramRotate != "none")
   #set ($faRotate="fa-rotate-$paramRotate")
#end
 
#* Flip *#
#if ($paramFlip != "none")
   #set ($faFlip="fa-flip-$paramFlip")
#end
 
#* Animaaton *#
#if ($paramAnimation == "spin")
   #set ($faAnimation="fa-spin")
#elseif ($paramAnimation == "pulse")
   #set ($faAnimation="fa-pulse")
#end

#* ----------------------------------------------------------------------------
 * OUTPUT
 *#
<i class="$faType $faIcon $faSize $faAlignment $faBorder $faRotate $faFlip $faAnimation" style="color: #$cssColor;"></i>
Was this article helpful to you? Yes No

Leave a Reply

Your email address will not be published. Required fields are marked *