Intégrer des icônes dans vos articles

 

Notre squelette utilise le jeux d’icônes Font Awesome . Vous pouvez aussi les inclure dans des articles.

Comment utiliser les icônes Font Awesome

pour intéger le logo nommé map-o utilisé ce code.

<i class="fa fa-map-o" aria-hidden="true"></i>

Pour utiliser les autres icônes il suffit de remplacer map-o par le nom de l’icône que vous trouvez dans la liste infra.
 <i class="fa fa-address-book" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-arrows-v" aria-hidden="true"></i> 

Options avancés

Grossir les icones

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

Pour grossir les icônes par rapport à la taille de la police, utiliser fa-lg (33% increase), fa-2x, fa-3x, fa-4x, oufa-5x classes.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Entourer et placer à gauche ou à droite


…tomorrow we will run faster, stretch out our arms farther… And then one fine morning—
So we beat on, boats against the current, borne back ceaselessly into the past.

utiliser fa-border pour entourer et/ou fa-pull-right / fa-pull-left pour placer un icone sur la droite ou la gauche d’un texte.

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning&mdash; So we beat on, boats against the
current, borne back ceaselessly into the past.

Animer des icônes


Loading example (with fa-spinner icon)


Loading (with fa-circle-o-notch icon)


Loading example (with fa-refresh icon)


Loading example (with fa-cog icon)


Loading example (with fa-spinner icon)

utiliser fa-spin class pour activer la rotation, ou utiliser fa-pulse pour avoir une rotation en 8 étapes. ça marche très bien avec fa-spinner, fa-refresh, and fa-cog.

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>

Rotation d’icônes

 normal
 fa-rotate-90
 fa-rotate-180
 fa-rotate-270
 fa-flip-horizontal
 fa-flip-vertical

Pour effectuer une rotation utiliser fa-rotate-* ou fa-flip-* classes.

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical

La liste des icônes

Web Application Icons

Example of address-book
Example of address-book-o
Example of address-card
Example of address-card-o
Example of adjust
Example of american-sign-language-interpreting
Example of anchor
Example of archive
Example of area-chart
Example of arrows
Example of arrows-h
Example of arrows-v
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of asterisk
Example of at
Example of audio-description
Example of automobile (alias)
Example of balance-scale
Example of ban
Example of bank (alias)
Example of bar-chart
Example of bar-chart-o (alias)
Example of barcode
Example of bars
Example of bath
Example of bathtub (alias)
Example of battery (alias)
Example of battery-0 (alias)
Example of battery-1 (alias)
Example of battery-2 (alias)
Example of battery-3 (alias)
Example of battery-4 (alias)
Example of battery-empty
Example of battery-full
Example of battery-half
Example of battery-quarter
Example of battery-three-quarters
Example of bed
Example of beer
Example of bell
Example of bell-o
Example of bell-slash
Example of bell-slash-o
Example of bicycle
Example of binoculars
Example of birthday-cake
Example of blind
Example of bluetooth
Example of bluetooth-b
Example of bolt
Example of bomb
Example of book
Example of bookmark
Example of bookmark-o
Example of braille
Example of briefcase
Example of bug
Example of building
Example of building-o
Example of bullhorn
Example of bullseye
Example of bus
Example of cab (alias)
Example of calculator
Example of calendar
Example of calendar-check-o
Example of calendar-minus-o
Example of calendar-o
Example of calendar-plus-o
Example of calendar-times-o
Example of camera
Example of camera-retro
Example of car
Example of caret-square-o-down
Example of caret-square-o-left
Example of caret-square-o-right
Example of caret-square-o-up
Example of cart-arrow-down
Example of cart-plus
Example of cc
Example of certificate
Example of check
Example of check-circle
Example of check-circle-o
Example of check-square
Example of check-square-o
Example of child
Example of circle
Example of circle-o
Example of circle-o-notch
Example of circle-thin
Example of clock-o
Example of clone
Example of close (alias)
Example of cloud
Example of cloud-download
Example of cloud-upload
Example of code
Example of code-fork
Example of coffee
Example of cog
Example of cogs
Example of comment
Example of comment-o
Example of commenting
Example of commenting-o
Example of comments
Example of comments-o
Example of compass
Example of copyright
Example of creative-commons
Example of credit-card
Example of credit-card-alt
Example of crop
Example of crosshairs
Example of cube
Example of cubes
Example of cutlery
Example of dashboard (alias)
Example of database
Example of deaf
Example of deafness (alias)
Example of desktop
Example of diamond
Example of dot-circle-o
Example of download
Example of drivers-license (alias)
Example of drivers-license-o (alias)
Example of edit (alias)
Example of ellipsis-h
Example of ellipsis-v
Example of envelope
Example of envelope-o
Example of envelope-open
Example of envelope-open-o
Example of envelope-square
Example of eraser
Example of exchange
Example of exclamation
Example of exclamation-circle
Example of exclamation-triangle
Example of external-link
Example of external-link-square
Example of eye
Example of eye-slash
Example of eyedropper
Example of fax
Example of feed (alias)
Example of female
Example of fighter-jet
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o (alias)
Example of file-pdf-o
Example of file-photo-o (alias)
Example of file-picture-o (alias)
Example of file-powerpoint-o
Example of file-sound-o (alias)
Example of file-video-o
Example of file-word-o
Example of file-zip-o (alias)
Example of film
Example of filter
Example of fire
Example of fire-extinguisher
Example of flag
Example of flag-checkered
Example of flag-o
Example of flash (alias)
Example of flask
Example of folder
Example of folder-o
Example of folder-open
Example of folder-open-o
Example of frown-o
Example of futbol-o
Example of gamepad
Example of gavel
Example of gear (alias)
Example of gears (alias)
Example of gift
Example of glass
Example of globe
Example of graduation-cap
Example of group (alias)
Example of hand-grab-o (alias)
Example of hand-lizard-o
Example of hand-paper-o
Example of hand-peace-o
Example of hand-pointer-o
Example of hand-rock-o
Example of hand-scissors-o
Example of hand-spock-o
Example of hand-stop-o (alias)
Example of handshake-o
Example of hard-of-hearing (alias)
Example of hashtag
Example of hdd-o
Example of headphones
Example of heart
Example of heart-o
Example of heartbeat
Example of history
Example of home
Example of hotel (alias)
Example of hourglass
Example of hourglass-1 (alias)
Example of hourglass-2 (alias)
Example of hourglass-3 (alias)
Example of hourglass-end
Example of hourglass-half
Example of hourglass-o
Example of hourglass-start
Example of i-cursor
Example of id-badge
Example of id-card
Example of id-card-o
Example of image (alias)
Example of inbox
Example of industry
Example of info
Example of info-circle
Example of institution (alias)
Example of key
Example of keyboard-o
Example of language
Example of laptop
Example of leaf
Example of legal (alias)
Example of lemon-o
Example of level-down
Example of level-up
Example of life-bouy (alias)
Example of life-buoy (alias)
Example of life-ring
Example of life-saver (alias)
Example of lightbulb-o
Example of line-chart
Example of location-arrow
Example of lock
Example of low-vision
Example of magic
Example of magnet
Example of mail-forward (alias)
Example of mail-reply (alias)
Example of mail-reply-all (alias)
Example of male
Example of map
Example of map-marker
Example of map-o
Example of map-pin
Example of map-signs
Example of meh-o
Example of microchip
Example of microphone
Example of microphone-slash
Example of minus
Example of minus-circle
Example of minus-square
Example of minus-square-o
Example of mobile
Example of mobile-phone (alias)
Example of money
Example of moon-o
Example of mortar-board (alias)
Example of motorcycle
Example of mouse-pointer
Example of music
Example of navicon (alias)
Example of newspaper-o
Example of object-group
Example of object-ungroup
Example of paint-brush
Example of paper-plane
Example of paper-plane-o
Example of paw
Example of pencil
Example of pencil-square
Example of pencil-square-o
Example of percent
Example of phone
Example of phone-square
Example of photo (alias)
Example of picture-o
Example of pie-chart
Example of plane
Example of plug
Example of plus
Example of plus-circle
Example of plus-square
Example of plus-square-o
Example of podcast
Example of power-off
Example of print
Example of puzzle-piece
Example of qrcode
Example of question
Example of question-circle
Example of question-circle-o
Example of quote-left
Example of quote-right
Example of random
Example of recycle
Example of refresh
Example of registered
Example of remove (alias)
Example of reorder (alias)
Example of reply
Example of reply-all
Example of retweet
Example of road
Example of rocket
Example of rss
Example of rss-square
Example of s15 (alias)
Example of search
Example of search-minus
Example of search-plus
Example of send (alias)
Example of send-o (alias)
Example of server
Example of share
Example of share-alt
Example of share-alt-square
Example of share-square
Example of share-square-o
Example of shield
Example of ship
Example of shopping-bag
Example of shopping-basket
Example of shopping-cart
Example of shower
Example of sign-in
Example of sign-language
Example of sign-out
Example of signal
Example of signing (alias)
Example of sitemap
Example of sliders
Example of smile-o
Example of snowflake-o
Example of soccer-ball-o (alias)
Example of sort
Example of sort-alpha-asc
Example of sort-alpha-desc
Example of sort-amount-asc
Example of sort-amount-desc
Example of sort-asc
Example of sort-desc
Example of sort-down (alias)
Example of sort-numeric-asc
Example of sort-numeric-desc
Example of sort-up (alias)
Example of space-shuttle
Example of spinner
Example of spoon
Example of square
Example of square-o
Example of star
Example of star-half
Example of star-half-empty (alias)
Example of star-half-full (alias)
Example of star-half-o
Example of star-o
Example of sticky-note
Example of sticky-note-o
Example of street-view
Example of suitcase
Example of sun-o
Example of support (alias)
Example of tablet
Example of tachometer
Example of tag
Example of tags
Example of tasks
Example of taxi
Example of television
Example of terminal
Example of thermometer (alias)
Example of thermometer-0 (alias)
Example of thermometer-1 (alias)
Example of thermometer-2 (alias)
Example of thermometer-3 (alias)
Example of thermometer-4 (alias)
Example of thermometer-empty
Example of thermometer-full
Example of thermometer-half
Example of thermometer-quarter
Example of thermometer-three-quarters
Example of thumb-tack
Example of thumbs-down
Example of thumbs-o-down
Example of thumbs-o-up
Example of thumbs-up
Example of ticket
Example of times
Example of times-circle
Example of times-circle-o
Example of times-rectangle (alias)
Example of times-rectangle-o (alias)
Example of tint
Example of toggle-down (alias)
Example of toggle-left (alias)
Example of toggle-off
Example of toggle-on
Example of toggle-right (alias)
Example of toggle-up (alias)
Example of trademark
Example of trash
Example of trash-o
Example of tree
Example of trophy
Example of truck
Example of tty
Example of tv (alias)
Example of umbrella
Example of universal-access
Example of university
Example of unlock
Example of unlock-alt
Example of unsorted (alias)
Example of upload
Example of user
Example of user-circle
Example of user-circle-o
Example of user-o
Example of user-plus
Example of user-secret
Example of user-times
Example of users
Example of vcard (alias)
Example of vcard-o (alias)
Example of video-camera
Example of volume-control-phone
Example of volume-down
Example of volume-off
Example of volume-up
Example of warning (alias)
Example of wheelchair
Example of wheelchair-alt
Example of wifi
Example of window-close
Example of window-close-o
Example of window-maximize
Example of window-minimize
Example of window-restore
Example of wrench

Accessibility Icons

Example of american-sign-language-interpreting
Example of asl-interpreting (alias)
Example of assistive-listening-systems
Example of audio-description
Example of blind
Example of braille
Example of cc
Example of deaf
Example of deafness (alias)
Example of hard-of-hearing (alias)
Example of low-vision
Example of question-circle-o
Example of sign-language
Example of signing (alias)
Example of tty
Example of universal-access
Example of volume-control-phone
Example of wheelchair
Example of wheelchair-alt

Hand Icons

Example of hand-grab-o (alias)
Example of hand-lizard-o
Example of hand-o-down
Example of hand-o-left
Example of hand-o-right
Example of hand-o-up
Example of hand-paper-o
Example of hand-peace-o
Example of hand-pointer-o
Example of hand-rock-o
Example of hand-scissors-o
Example of hand-spock-o
Example of hand-stop-o (alias)
Example of thumbs-down
Example of thumbs-o-down
Example of thumbs-o-up
Example of thumbs-up

Transportation Icons

Example of ambulance
Example of automobile (alias)
Example of bicycle
Example of bus
Example of cab (alias)
Example of car
Example of fighter-jet
Example of motorcycle
Example of plane
Example of rocket
Example of ship
Example of space-shuttle
Example of subway
Example of taxi
Example of train
Example of truck
Example of wheelchair
Example of wheelchair-alt

Gender Icons

Example of genderless
Example of intersex (alias)
Example of mars
Example of mars-double
Example of mars-stroke
Example of mars-stroke-h
Example of mars-stroke-v
Example of mercury
Example of neuter
Example of transgender
Example of transgender-alt
Example of venus
Example of venus-double
Example of venus-mars

File Type Icons

Example of file
Example of file-archive-o
Example of file-audio-o
Example of file-code-o
Example of file-excel-o
Example of file-image-o
Example of file-movie-o (alias)
Example of file-o
Example of file-pdf-o
Example of file-photo-o (alias)
Example of file-picture-o (alias)
Example of file-powerpoint-o
Example of file-sound-o (alias)
Example of file-text
Example of file-text-o
Example of file-video-o
Example of file-word-o
Example of file-zip-o (alias)

Spinner Icons

Example of circle-o-notch
Example of cog
Example of gear (alias)
Example of refresh
Example of spinner

Form Control Icons

Example of check-square
Example of check-square-o
Example of circle
Example of circle-o
Example of dot-circle-o
Example of minus-square
Example of minus-square-o
Example of plus-square
Example of plus-square-o
Example of square
Example of square-o

Payment Icons

Example of cc-amex
Example of cc-diners-club
Example of cc-discover
Example of cc-jcb
Example of cc-mastercard
Example of cc-paypal
Example of cc-stripe
Example of cc-visa
Example of credit-card
Example of credit-card-alt
Example of google-wallet
Example of paypal

Chart Icons

Example of area-chart
Example of bar-chart
Example of bar-chart-o (alias)
Example of line-chart
Example of pie-chart

Currency Icons

Example of bitcoin (alias)
Example of btc
Example of cny (alias)
Example of dollar (alias)
Example of eur
Example of euro (alias)
Example of gbp
Example of gg
Example of gg-circle
Example of ils
Example of inr
Example of jpy
Example of krw
Example of money
Example of rmb (alias)
Example of rouble (alias)
Example of rub
Example of ruble (alias)
Example of rupee (alias)
Example of shekel (alias)
Example of sheqel (alias)
Example of try
Example of turkish-lira (alias)
Example of usd
Example of won (alias)
Example of yen (alias)

Text Editor Icons

Example of align-center
Example of align-justify
Example of align-left
Example of align-right
Example of bold
Example of chain (alias)
Example of chain-broken
Example of clipboard
Example of columns
Example of copy (alias)
Example of cut (alias)
Example of dedent (alias)
Example of eraser
Example of file
Example of file-o
Example of file-text
Example of file-text-o
Example of files-o
Example of floppy-o
Example of font
Example of header
Example of indent
Example of italic
Example of link
Example of list
Example of list-alt
Example of list-ol
Example of list-ul
Example of outdent
Example of paperclip
Example of paragraph
Example of paste (alias)
Example of repeat
Example of rotate-left (alias)
Example of rotate-right (alias)
Example of save (alias)
Example of scissors
Example of strikethrough
Example of subscript
Example of superscript
Example of table
Example of text-height
Example of text-width
Example of th
Example of th-large
Example of th-list
Example of underline
Example of undo
Example of unlink (alias)

Directional Icons

Example of angle-double-down
Example of angle-double-left
Example of angle-double-right
Example of angle-double-up
Example of angle-down
Example of angle-left
Example of angle-right
Example of angle-up
Example of arrow-circle-down
Example of arrow-circle-left
Example of arrow-circle-o-down
Example of arrow-circle-o-left
Example of arrow-circle-o-right
Example of arrow-circle-o-up
Example of arrow-circle-right
Example of arrow-circle-up
Example of arrow-down
Example of arrow-left
Example of arrow-right
Example of arrow-up
Example of arrows
Example of arrows-alt
Example of arrows-h
Example of arrows-v
Example of caret-down
Example of caret-left
Example of caret-right
Example of caret-square-o-down
Example of caret-square-o-left
Example of caret-square-o-right
Example of caret-square-o-up
Example of caret-up
Example of chevron-circle-down
Example of chevron-circle-left
Example of chevron-circle-right
Example of chevron-circle-up
Example of chevron-down
Example of chevron-left
Example of chevron-right
Example of chevron-up
Example of exchange
Example of hand-o-down
Example of hand-o-left
Example of hand-o-right
Example of hand-o-up
Example of long-arrow-down
Example of long-arrow-left
Example of long-arrow-right
Example of long-arrow-up
Example of toggle-down (alias)
Example of toggle-left (alias)
Example of toggle-right (alias)
Example of toggle-up (alias)

Video Player Icons

Example of arrows-alt
Example of backward
Example of compress
Example of eject
Example of expand
Example of fast-backward
Example of fast-forward
Example of forward
Example of pause
Example of pause-circle
Example of pause-circle-o
Example of play
Example of play-circle
Example of play-circle-o
Example of random
Example of step-backward
Example of step-forward
Example of stop
Example of stop-circle
Example of stop-circle-o
Example of youtube-play

Brand Icons

Example of 500px
Example of adn
Example of amazon
Example of android
Example of angellist
Example of apple
Example of bandcamp
Example of behance
Example of behance-square
Example of bitbucket
Example of bitbucket-square
Example of bitcoin (alias)
Example of black-tie
Example of bluetooth
Example of bluetooth-b
Example of btc
Example of buysellads
Example of cc-amex
Example of cc-diners-club
Example of cc-discover
Example of cc-jcb
Example of cc-mastercard
Example of cc-paypal
Example of cc-stripe
Example of cc-visa
Example of chrome
Example of codepen
Example of codiepie
Example of connectdevelop
Example of contao
Example of css3
Example of dashcube
Example of delicious
Example of deviantart
Example of digg
Example of dribbble
Example of dropbox
Example of drupal
Example of edge
Example of eercast
Example of empire
Example of envira
Example of etsy
Example of expeditedssl
Example of fa (alias)
Example of facebook
Example of facebook-f (alias)
Example of facebook-official
Example of facebook-square
Example of firefox
Example of first-order
Example of flickr
Example of font-awesome
Example of fonticons
Example of fort-awesome
Example of forumbee
Example of foursquare
Example of free-code-camp
Example of ge (alias)
Example of get-pocket
Example of gg
Example of gg-circle
Example of git
Example of git-square
Example of github
Example of github-alt
Example of github-square
Example of gitlab
Example of gittip (alias)
Example of glide
Example of glide-g
Example of google
Example of google-plus
Example of google-plus-circle (alias)
Example of google-plus-official
Example of google-plus-square
Example of google-wallet
Example of gratipay
Example of grav
Example of hacker-news
Example of houzz
Example of html5
Example of imdb
Example of instagram
Example of internet-explorer
Example of ioxhost
Example of joomla
Example of jsfiddle
Example of lastfm
Example of lastfm-square
Example of leanpub
Example of linkedin
Example of linkedin-square
Example of linode
Example of linux
Example of maxcdn
Example of meanpath
Example of medium
Example of meetup
Example of mixcloud
Example of modx
Example of odnoklassniki
Example of odnoklassniki-square
Example of opencart
Example of openid
Example of opera
Example of optin-monster
Example of pagelines
Example of paypal
Example of pied-piper
Example of pied-piper-alt
Example of pied-piper-pp
Example of pinterest
Example of pinterest-p
Example of pinterest-square
Example of product-hunt
Example of qq
Example of quora
Example of ra (alias)
Example of ravelry
Example of rebel
Example of reddit
Example of reddit-alien
Example of reddit-square
Example of renren
Example of resistance (alias)
Example of safari
Example of scribd
Example of sellsy
Example of share-alt
Example of share-alt-square
Example of shirtsinbulk
Example of simplybuilt
Example of skyatlas
Example of skype
Example of slack
Example of slideshare
Example of snapchat
Example of snapchat-ghost
Example of snapchat-square
Example of soundcloud
Example of spotify
Example of stack-exchange
Example of stack-overflow
Example of steam
Example of steam-square
Example of stumbleupon
Example of stumbleupon-circle
Example of superpowers
Example of telegram
Example of tencent-weibo
Example of themeisle
Example of trello
Example of tripadvisor
Example of tumblr
Example of tumblr-square
Example of twitch
Example of twitter
Example of twitter-square
Example of usb
Example of viacoin
Example of viadeo
Example of viadeo-square
Example of vimeo
Example of vimeo-square
Example of vine
Example of vk
Example of wechat (alias)
Example of weibo
Example of weixin
Example of whatsapp
Example of wikipedia-w
Example of windows
Example of wordpress
Example of wpbeginner
Example of wpexplorer
Example of wpforms
Example of xing
Example of xing-square
Example of y-combinator
Example of y-combinator-square (alias)
Example of yahoo
Example of yc (alias)
Example of yc-square (alias)
Example of yelp
Example of yoast
Example of youtube
Example of youtube-play
Example of youtube-square

Medical Icons

Example of ambulance
Example of h-square
Example of heart
Example of heart-o
Example of heartbeat
Example of hospital-o
Example of medkit
Example of plus-square
Example of stethoscope
Example of user-md
Example of wheelchair
Example of wheelchair-alt