Page History

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

iconTitle	Install from Atlassian Marketplace
linkLabel	Install from Atlassian Marketplace
iconClasses	faa-tada
linkClasses	faa-parent animated-hover
linkTarget	true
link	true
linkUrl	https://marketplace.atlassian.com/apps/1215716/font-icons-for-confluence?hosting=server&tab=overview
iconCode	fas fa-shopping-cart
linkType	Primary

Font Icon

linkLabel	Support
linkTarget	true
link	true
linkUrl	https://www.moewe.io/en/atlassian/support/?add_on=Font%20Icons%20for%20Confluence#contact
iconCode	far fa-question-circle
linkType	Button

Page Tree

startDepth	3

Features

Font Icon

iconClasses	fa-fw
iconCSS	color: green;
iconCode	far fa-check-square

Finally improve your content using appealing and descriptive icons

Font Icon

iconClasses	fa-fw
iconCSS	color: green
iconCode	far fa-check-square

Choose from 1000+ icons

Font Icon

iconClasses	fa-fw
iconCSS	color: green
iconCode	far fa-check-square

Use an intuitive search for finding icons

Font Icon

iconClasses	fa-fw
iconCSS	color: green;
iconCode	far fa-check-square

Use icons for button linke links

Fonts

Missing a font?

Please contact us.

Devicons

Make use of Devicons

Font Icon

iconLibrary	Devicons
iconColor	#59a27d
iconSize	10.0
iconCode	devicons-grunt
linkType	Link

Font Icon

iconLibrary	Devicons
iconColor	#e04949
iconSize	9.0
iconCode	devicons-grunt
linkType	Link

Font Icon

iconLibrary	Devicons
iconSize	8.0
iconCode	devicons-grunt
linkType	Link

Font Icon

iconLibrary	Devicons
iconSize	7.0
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconSize	6.0
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconSize	5.0
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconSize	4.0
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconSize	3.0
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconSize	2.0
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconSize	0.75
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconSize	0.5
iconCode	devicons-grunt

Font Icon

iconLibrary	Devicons
iconSize	0.25
iconCode	devicons-grunt

Font Awesome

Make use of Font Awesome

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconColor	#ffd700
iconSize	10.0
iconCode	fas fa-star
linkType	Link

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconColor	#c0c0c0
iconSize	9.0
iconCode	far fa-star
linkType	Link

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	8.0
iconCode	fas fa-star
linkType	Link

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	7.0
iconCode	far fa-star

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	6.0
iconCode	far fa-star

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	5.0
iconCode	far fa-star

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	4.0
iconCode	far fa-star

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	3.0
iconCode	far fa-star

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	2.0
iconCode	far fa-star

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconCode	far fa-star

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.75
iconCode	far fa-star

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.5
iconCode	far fa-star
linkType	Link

Font Icon

library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.25
iconCode	far fa-star

Additional CSS classes

You can use Font Awesomes special CSS classes as well.

Some examples:

Spinner

Font Icon

iconClasses	fa-spin
iconCode	fa fa-sync

fa-spin

Font Icon

iconClasses	fa-fw
iconCode	fa fa-shield-alt

(default)

Font Icon

iconClasses	fa-rotate-90 fa-fw
iconCode	fa fa-shield-alt

fa-rotate-90

Font Icon

iconClasses	fa-rotate-180 fa-fw
iconCode	fa fa-shield-alt

fa-rotate-180

Font Icon

iconClasses	fa-rotate-270 fa-fw
iconCode	fa fa-shield-alt

fa-rotate-270

Font Icon

iconClasses	fa-flip-horizontal fa-fw
iconCode	fa fa-shield-alt

fa-flip-horizontal

Font Icon

iconClasses	fa-flip-vertical fa-fw
iconCode	fa 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 load

On icon hover

On parent

CSS classes are added to the icon

The link must have the CSS classes "faa-parent animated-hover". The other class must be added to the icon.

Font Icon

iconClasses	faa-wrench animated fa-fw
iconCode	fas fa-wrench
linkType	Link

faa-wrench animated

Font Icon

iconClasses	faa-wrench animated-hover fa-fw
iconCode	fas fa-wrench
linkType	Link

faa-wrench animated-hover

Font Icon

linkLabel	faa-wrench
iconClasses	faa-wrench fa-fw
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-wrench
linkType	Link

Font Icon

iconClasses	faa-ring animated fa-fw
iconCode	far fa-bell
linkType	Link

faa-ring animated

Font Icon

iconClasses	faa-ring animated-hover fa-fw
iconCode	far fa-bell
linkType	Link

faa-ring animated-hover

Font Icon

linkLabel	faa-ring
iconClasses	faa-ring fa-fw
linkClasses	animated-hover faa-parent
link	true
iconCode	far fa-bell
linkType	Button

Font Icon

iconClasses	faa-horizontal animated fa-fw
iconCode	fas fa-forward
linkType	Link

faa-horizontal animated

Font Icon

iconClasses	faa-horizontal animated-hover fa-fw
iconCode	fas fa-forward
linkType	Link

faa-horizontal animated-hover

Font Icon

linkLabel	faa-horizontal
iconClasses	faa-horizontal
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-forward
linkType	Primary

Font Icon

iconClasses	faa-vertical animated fa-fw
iconCode	fas fa-angle-double-down
linkType	Link

faa-vertical animated

Font Icon

iconClasses	faa-vertical animated-hover fa-fw
iconCode	fas fa-angle-double-down
linkType	Link

faa-vertical animated-hover

Font Icon

linkLabel	faa-vertical
iconClasses	faa-vertical fa-fw
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-angle-double-down
linkType	Subtle

Font Icon

iconClasses	faa-flash animated fa-fw
iconCode	fas fa-sign-in-alt
linkType	Link

faa-flash animated

Font Icon

iconClasses	faa-flash animated-hover fa-fw
iconCode	fas fa-sign-in-alt
linkType	Link

faa-flash animated-hover

Font Icon

linkLabel	faa-flash
iconClasses	faa-flash fa-fw
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-sign-in-alt
linkType	Link

Font Icon

iconClasses	faa-bounce animated fa-fw
iconCode	far fa-life-ring
linkType	Link

faa-bounce animated

Font Icon

iconClasses	faa-bounce animated-hover fa-fw
iconCode	far fa-life-ring
linkType	Link

faa-bounce animated-hover

Font Icon

linkLabel	faa-bounce
iconClasses	faa-bounce fa-fw
linkClasses	animated-hover faa-parent
link	true
iconCode	far fa-life-ring
linkType	Link

Font Icon

iconClasses	faa-spin animated fa-fw
iconCode	fas fa-spinner
linkType	Link

faa-spin animated

Font Icon

iconClasses	faa-spin animated-hover fa-fw
iconCode	fas fa-spinner
linkType	Link

faa-spin animated-hover

Font Icon

linkLabel	faa-spin
iconClasses	faa-spin fa-fw
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-spinner
linkType	Link

Font Icon

iconClasses	faa-float fa-fw animated fa-rotate-45
iconCode	fas fa-plane
linkType	Link

faa-float animated

Font Icon

iconClasses	faa-float fa-fw animated-hover fa-rotate-45
iconCode	fas fa-plane
linkType	Link

faa-float animated-hover

Font Icon

linkLabel	faa-float
iconClasses	faa-float fa-fw
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-plane
linkType	Primary

Font Icon

iconClasses	faa-pulse fa-fw animated
iconCode	fas fa-heart
linkType	Link

faa-pulse animated

Font Icon

iconClasses	faa-pulse fa-fw animated-hover
iconCode	fas fa-heart
linkType	Link

faa-pulse animated-hover

Font Icon

linkLabel	faa-pulse
iconClasses	faa-pulse fa-fw
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-heart
linkType	Button

Font Icon

iconClasses	faa-shake fa-fw animated
iconCode	fas fa-glass-martini
linkType	Link

faa-shake animated

Font Icon

iconClasses	faa-shake fa-fw animated-hover
iconCode	fas fa-glass-martini
linkType	Link

faa-shake animated-hover

Font Icon

linkLabel	faa-shake
iconClasses	faa-shake
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-glass-martini
linkType	Subtle

Font Icon

iconClasses	faa-tada fa-fw animated
iconCode	fas fa-trophy
linkType	Link

faa-tada animated

Font Icon

iconClasses	faa-tada fa-fw animated-hover
iconCode	fas fa-trophy
linkType	Link

faa-tada animated-hover

Font Icon

linkLabel	faa-tada
iconClasses	faa-tada
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-trophy
linkType	Button

Font Icon

iconClasses	faa-passing fa-fw animated
iconCode	fas fa-fighter-jet
linkType	Link

faa-passing animated

Font Icon

iconClasses	faa-passing fa-fw animated-hover
iconCode	fas fa-fighter-jet
linkType	Link

faa-passing animated-hover

Font Icon

linkLabel	faa-passing
iconClasses	faa-passing
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-fighter-jet
linkType	Link

Font Icon

iconClasses	faa-passing-reverse fa-fw animated fa-rotate-180
iconCode	fas fa-fighter-jet
linkType	Link

faa-passing-reverse animated

Font Icon

iconClasses	faa-passing-reverse fa-fw animated-hover fa-rotate-180
iconCode	fas fa-fighter-jet
linkType	Link

faa-passing-reverse animated-hover

Font Icon

linkLabel	faa-passing-reverse
iconClasses	faa-passing-reverse
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-fighter-jet
linkType	Link

Font Icon

iconClasses	faa-burst fa-fw animated
iconCode	fas fa-fire
linkType	Link

faa-burst animated

Font Icon

iconClasses	faa-burst fa-fw animated-hover
iconCode	fas fa-fire
linkType	Link

faa-burst animated-hover

Font Icon

linkLabel	faa-burst
iconClasses	faa-burst
linkClasses	animated-hover faa-parent
link	true
iconCode	fas fa-fire
linkType	Primary

Font Icon

iconClasses	faa-falling fa-fw animated
iconCode	far fa-star
linkType	Link

faa-falling animated

Font Icon

iconClasses	faa-falling fa-fw animated-hover
iconCode	far fa-star
linkType	Link

faa-falling animated-hover

Font Icon

linkLabel	faa-falling
iconClasses	faa-falling
linkClasses	animated-hover faa-parent
link	true
iconCode	far fa-star
linkType	Link

Ionicons

Make use of Ionicons

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconColor	#dc2525
iconSize	10.0
iconCode	ion-md-flag
linkType	Link

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconColor	#cdb22e
iconSize	9.0
iconCode	ion-md-flag
linkType	Link

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	8.0
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	7.0
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	6.0
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	5.0
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	4.0
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	3.0
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	2.0
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.75
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.5
iconCode	ion-md-flag

Font Icon

iconLibrary	Ionicons
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.25
iconCode	ion-md-flag

Line Awesome

Make use of Line Awesome

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconColor	#58b142
iconSize	10.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconColor	#b1ab42
iconSize	9.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconColor	#425fb1
iconSize	8.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	7.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	6.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	5.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	4.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	3.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	2.0
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.75
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.5
iconCode	las la-air-freshener
linkType	Link

Font Icon

iconLibrary	Line Awesome
library	Font Awesome
icon	fa-american-sign-language-interpreting
iconSize	0.25
iconCode	las la-air-freshener
linkType	Link

Features

Links and Link Buttons

Font Icon

linkLabel	Simple link
link	true
linkUrl	https://confluence-demo.moewe.io/display/DEMO/Font+Icons+for+Confluence
iconCode	fas fa-external-link-alt
linkType	Link

Font Icon

iconLibrary	Ionicons
linkLabel	Button
linkTarget	true
link	true
linkUrl	https://www.moewe.io/
iconCode	ion-md-alarm
linkType	Button

Font Icon

linkLabel	Primary
linkTarget	true
link	true
linkUrl	https://www.moewe.io/
iconCode	fas fa-cart-arrow-down
linkType	Primary

Font Icon

iconLibrary	Ionicons
linkLabel	Subtle
linkTarget	true
link	true
linkUrl	https://www.moewe.io/
iconCode	ion-md-options
linkType	Subtle

Page tree

Versions Compared

Old Version 10

New Version Current

Key

Features

Fonts

Missing a font?

Devicons

Font Awesome

Additional CSS classes

Spinner

Rotated & Flipped

Stacked Icons

Font Awesome Animations

Ionicons

Line Awesome

Features

Links and Link Buttons