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
- Login as administrator
- Go to “General Configuration”, then select “Custom HTML” from the menu on the left
- Click the “Edit” button
- Select text box “At end of the HEAD”
- 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>