Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Finally use appealing and descriptive icons in Confluence
Using the Font Icons Add-On for Confluence you can choose from many different icons. Use descriptive icons to better visualize and present your content.


Table of Contents

Font Icon
iconTitleInstall from Atlassian Marketplace
linkLabelInstall from Atlassian Marketplace
iconClassesfaa-tada
linkClassesfaa-parent animated-hover
linkTargettrue
linktrue
linkUrlhttps://marketplace.atlassian.com/apps/1215716/font-icons-for-confluence?hosting=server&tab=overview
iconCodefas fa-shopping-cart
linkTypePrimary
 
Font Icon
linkLabelSupport
linkTargettrue
linktrue
linkUrlhttps://www.moewe.io/en/atlassian/support/?add_on=Font%20Icons%20for%20Confluence#contact
iconCodefar fa-question-circle
linkTypeButton

Page Tree
startDepth3

Features

Font Icon
iconClassesfa-fw
iconCSScolor: green;
iconCodefar fa-check-square
 Finally improve your content using appealing and descriptive icons

Font Icon
iconClassesfa-fw
iconCSScolor: green
iconCodefar fa-check-square
 Choose from 1000+ icons

Font Icon
iconClassesfa-fw
iconCSScolor: green
iconCodefar fa-check-square
 Use an intuitive search for finding icons

Font Icon
iconClassesfa-fw
iconCSScolor: green;
iconCodefar fa-check-square
 Use icons for button linke links

Fonts

Missing a font?

Please contact us.

Devicons

Make use of Devicons

Font Icon
iconLibraryDevicons
iconColor#59a27d
iconSize10.0
iconCodedevicons-grunt
linkTypeLink
Font Icon
iconLibraryDevicons
iconColor#e04949
iconSize9.0
iconCodedevicons-grunt
linkTypeLink
Font Icon
iconLibraryDevicons
iconSize8.0
iconCodedevicons-grunt
linkTypeLink
Font Icon
iconLibraryDevicons
iconSize7.0
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconSize6.0
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconSize5.0
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconSize4.0
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconSize3.0
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconSize2.0
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconSize0.75
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconSize0.5
iconCodedevicons-grunt
Font Icon
iconLibraryDevicons
iconSize0.25
iconCodedevicons-grunt

Font Awesome

Make use of Font Awesome

Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconColor#ffd700
iconSize10.0
iconCodefas fa-star
linkTypeLink
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconColor#c0c0c0
iconSize9.0
iconCodefar fa-star
linkTypeLink
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize8.0
iconCodefas fa-star
linkTypeLink
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize7.0
iconCodefar fa-star
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize6.0
iconCodefar fa-star
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize5.0
iconCodefar fa-star
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize4.0
iconCodefar fa-star
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize3.0
iconCodefar fa-star
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize2.0
iconCodefar fa-star
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconCodefar fa-star
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.75
iconCodefar fa-star
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.5
iconCodefar fa-star
linkTypeLink
Font Icon
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.25
iconCodefar fa-star

Additional CSS classes

You can use Font Awesomes special CSS classes as well.

Some examples:

Spinner

Font Icon
iconClassesfa-spin
iconCodefa fa-sync
 fa-spin

Font Icon
iconClasses fa-fw
iconCodefa fa-shield-alt
 (default)

Font Icon
iconClassesfa-rotate-90 fa-fw
iconCodefa fa-shield-alt
 fa-rotate-90
Font Icon
iconClassesfa-rotate-180 fa-fw
iconCodefa fa-shield-alt
fa-rotate-180
Font Icon
iconClassesfa-rotate-270 fa-fw
iconCodefa fa-shield-alt
 fa-rotate-270
Font Icon
iconClassesfa-flip-horizontal fa-fw
iconCodefa fa-shield-alt
 fa-flip-horizontal
Font Icon
iconClassesfa-flip-vertical fa-fw
iconCodefa fa-shield-alt
 fa-flip-vertical

Stacked Icons

Will be includeed in a future release.

Font Awesome Animations

We've included some more animations.

On DOM loadOn icon hoverOn parent
CSS classes are added to the iconThe link must have the CSS classes "faa-parent animated-hover". The other class must be added to the icon.

Font Icon
iconClassesfaa-wrench animated fa-fw
iconCodefas fa-wrench
linkTypeLink
faa-wrench animated

Font Icon
iconClassesfaa-wrench animated-hover fa-fw
iconCodefas fa-wrench
linkTypeLink
faa-wrench animated-hover

Font Icon
linkLabelfaa-wrench
iconClassesfaa-wrench fa-fw
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-wrench
linkTypeLink

Font Icon
iconClassesfaa-ring animated fa-fw
iconCodefar fa-bell
linkTypeLink
faa-ring animated

Font Icon
iconClassesfaa-ring animated-hover fa-fw
iconCodefar fa-bell
linkTypeLink
faa-ring animated-hover

Font Icon
linkLabelfaa-ring
iconClassesfaa-ring fa-fw
linkClassesanimated-hover faa-parent
linktrue
iconCodefar fa-bell
linkTypeButton

Font Icon
iconClassesfaa-horizontal animated fa-fw
iconCodefas fa-forward
linkTypeLink
faa-horizontal animated

Font Icon
iconClassesfaa-horizontal animated-hover fa-fw
iconCodefas fa-forward
linkTypeLink
faa-horizontal animated-hover 

Font Icon
linkLabelfaa-horizontal
iconClassesfaa-horizontal
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-forward
linkTypePrimary

Font Icon
iconClassesfaa-vertical animated fa-fw
iconCodefas fa-angle-double-down
linkTypeLink
faa-vertical animated

Font Icon
iconClassesfaa-vertical animated-hover fa-fw
iconCodefas fa-angle-double-down
linkTypeLink
faa-vertical animated-hover 

Font Icon
linkLabelfaa-vertical
iconClassesfaa-vertical fa-fw
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-angle-double-down
linkTypeSubtle

Font Icon
iconClassesfaa-flash animated fa-fw
iconCodefas fa-sign-in-alt
linkTypeLink
faa-flash animated

Font Icon
iconClassesfaa-flash animated-hover fa-fw
iconCodefas fa-sign-in-alt
linkTypeLink
faa-flash animated-hover 

Font Icon
linkLabelfaa-flash
iconClassesfaa-flash fa-fw
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-sign-in-alt
linkTypeLink

Font Icon
iconClassesfaa-bounce animated fa-fw
iconCodefar fa-life-ring
linkTypeLink
faa-bounce animated

Font Icon
iconClassesfaa-bounce animated-hover fa-fw
iconCodefar fa-life-ring
linkTypeLink
faa-bounce animated-hover 

Font Icon
linkLabelfaa-bounce
iconClassesfaa-bounce fa-fw
linkClassesanimated-hover faa-parent
linktrue
iconCodefar fa-life-ring
linkTypeLink

Font Icon
iconClassesfaa-spin animated fa-fw
iconCodefas fa-spinner
linkTypeLink
faa-spin animated

Font Icon
iconClassesfaa-spin animated-hover fa-fw
iconCodefas fa-spinner
linkTypeLink
faa-spin animated-hover 

Font Icon
linkLabelfaa-spin
iconClassesfaa-spin fa-fw
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-spinner
linkTypeLink

Font Icon
iconClassesfaa-float fa-fw animated fa-rotate-45
iconCodefas fa-plane
linkTypeLink
faa-float animated

Font Icon
iconClassesfaa-float fa-fw animated-hover fa-rotate-45
iconCodefas fa-plane
linkTypeLink
faa-float animated-hover 

Font Icon
linkLabelfaa-float
iconClassesfaa-float fa-fw
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-plane
linkTypePrimary

Font Icon
iconClassesfaa-pulse fa-fw animated
iconCodefas fa-heart
linkTypeLink
faa-pulse animated

Font Icon
iconClassesfaa-pulse fa-fw animated-hover
iconCodefas fa-heart
linkTypeLink
faa-pulse animated-hover 

Font Icon
linkLabelfaa-pulse
iconClassesfaa-pulse fa-fw
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-heart
linkTypeButton

Font Icon
iconClassesfaa-shake fa-fw animated
iconCodefas fa-glass-martini
linkTypeLink
faa-shake animated

Font Icon
iconClassesfaa-shake fa-fw animated-hover
iconCodefas fa-glass-martini
linkTypeLink
faa-shake animated-hover 

Font Icon
linkLabelfaa-shake
iconClassesfaa-shake
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-glass-martini
linkTypeSubtle

Font Icon
iconClassesfaa-tada fa-fw animated
iconCodefas fa-trophy
linkTypeLink
faa-tada animated

Font Icon
iconClassesfaa-tada fa-fw animated-hover
iconCodefas fa-trophy
linkTypeLink
faa-tada animated-hover 

Font Icon
linkLabelfaa-tada
iconClassesfaa-tada
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-trophy
linkTypeButton

Font Icon
iconClassesfaa-passing fa-fw animated
iconCodefas fa-fighter-jet
linkTypeLink
faa-passing animated

Font Icon
iconClassesfaa-passing fa-fw animated-hover
iconCodefas fa-fighter-jet
linkTypeLink
faa-passing animated-hover 

Font Icon
linkLabelfaa-passing
iconClassesfaa-passing
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-fighter-jet
linkTypeLink

Font Icon
iconClassesfaa-passing-reverse fa-fw animated fa-rotate-180
iconCodefas fa-fighter-jet
linkTypeLink
faa-passing-reverse animated

Font Icon
iconClassesfaa-passing-reverse fa-fw animated-hover fa-rotate-180
iconCodefas fa-fighter-jet
linkTypeLink
faa-passing-reverse animated-hover 

Font Icon
linkLabelfaa-passing-reverse
iconClassesfaa-passing-reverse
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-fighter-jet
linkTypeLink

Font Icon
iconClassesfaa-burst fa-fw animated
iconCodefas fa-fire
linkTypeLink
faa-burst animated

Font Icon
iconClassesfaa-burst fa-fw animated-hover
iconCodefas fa-fire
linkTypeLink
faa-burst animated-hover 

Font Icon
linkLabelfaa-burst
iconClassesfaa-burst
linkClassesanimated-hover faa-parent
linktrue
iconCodefas fa-fire
linkTypePrimary

Font Icon
iconClassesfaa-falling fa-fw animated
iconCodefar fa-star
linkTypeLink
faa-falling animated

Font Icon
iconClassesfaa-falling fa-fw animated-hover
iconCodefar fa-star
linkTypeLink
faa-falling animated-hover 

Font Icon
linkLabelfaa-falling
iconClassesfaa-falling
linkClassesanimated-hover faa-parent
linktrue
iconCodefar fa-star
linkTypeLink


Ionicons

Make use of Ionicons

Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconColor#dc2525
iconSize10.0
iconCodeion-md-flag
linkTypeLink
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconColor#cdb22e
iconSize9.0
iconCodeion-md-flag
linkTypeLink
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize8.0
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize7.0
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize6.0
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize5.0
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize4.0
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize3.0
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize2.0
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.75
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.5
iconCodeion-md-flag
Font Icon
iconLibraryIonicons
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.25
iconCodeion-md-flag


Line Awesome

Make use of Line Awesome

Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconColor#58b142
iconSize10.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconColor#b1ab42
iconSize9.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconColor#425fb1
iconSize8.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize7.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize6.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize5.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize4.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize3.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize2.0
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.75
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.5
iconCodelas la-air-freshener
linkTypeLink
Font Icon
iconLibraryLine Awesome
libraryFont Awesome
iconfa-american-sign-language-interpreting
iconSize0.25
iconCodelas la-air-freshener
linkTypeLink

Features

Links and Link Buttons

Font Icon
linkLabelSimple link
linktrue
linkUrlhttps://confluence-demo.moewe.io/display/DEMO/Font+Icons+for+Confluence
iconCodefas fa-external-link-alt
linkTypeLink
 

Font Icon
iconLibraryIonicons
linkLabelButton
linkTargettrue
linktrue
linkUrlhttps://www.moewe.io/
iconCodeion-md-alarm
linkTypeButton
 

Font Icon
linkLabelPrimary
linkTargettrue
linktrue
linkUrlhttps://www.moewe.io/
iconCodefas fa-cart-arrow-down
linkTypePrimary
 

Font Icon
iconLibraryIonicons
linkLabelSubtle
linkTargettrue
linktrue
linkUrlhttps://www.moewe.io/
iconCodeion-md-options
linkTypeSubtle