Comment utiliser la bibliothèque d’icônes Font Awesome ?
On a parfois besoin d’ajouter rapidement et simplement des icônes sur son site internet, dans les menus ou tout simplement dans les contenus. Font Awesome dans sa version 4.6.3, disponible gratuitement sur le Web propose 634 icônes différentes, de quoi avoir le choix !
Font Awesome, c’est quoi ?
C’est une police de caractères qui permet d’afficher des icônes, des pictogrammes sur un site Web, mais aussi à l’intérieur d’un document Photoshop, Illustrator, Word, Open Office… Crée initialement pour être utilisée avec Bootstrap, elle peut s’utiliser avec n’importe quel projet. Toutes les icônes sont gratuites, personnalisables et redimensionnables à souhait, car sous format vectoriel.
Comment utiliser Font Awesome ?
L’utilisation est très simple. La première chose à faire est de vous rendre sur la page fontawesome.io/get-started/ et de télécharger le dossier Font Awesome. Une fois dézippé, ouvrez le dossier et vous allez avoir à l’intérieur plusieurs dossiers dont un nommé fonts qui permet d’installer les fichiers de police sur votre ordinateur.
Sinon vous pouvez importer ce URL soit depuis les feuilles de style ou le mettre entre le head https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css.
Une fois les polices Font Awesome installées, vous allez pouvoir les intégrer dans n’importe quel document. Petite astuce pour cela, vous devez aller sur cette nouvelle page Web fontawesome.io/cheatsheet/ et copier coller l’icône et pas le code unicode et bien sûr sélectionner la police Font Awesome sur votre document.
Exemple
Utiliser Font Awesome dans les listes :
- Google +
Animation :
Rotation :
La taille :
fa-glass
fa-music
fa-search
fa-envelope-o
fa-heart
fa-star
fa-star-o
fa-user
fa-film
fa-th-large
fa-th
fa-th-list
fa-check
fa-times
fa-search-plus
fa-search-minus
fa-power-off
fa-signal
fa-gear
fa-cog
fa-trash-o
fa-home
fa-file-o
fa-clock-o
fa-road
fa-download
fa-arrow-circle-o-down
fa-arrow-circle-o-up
fa-inbox
fa-play-circle-o
fa-rotate-right
fa-repeat
fa-refresh
fa-list-alt
fa-lock
fa-flag
fa-headphones
fa-volume-off
fa-volume-down
fa-volume-up
fa-qrcode
fa-tag
fa-book
fa-bookmark
fa-print
fa-camera
fa-font
fa-bold
fa-italic
fa-text-height
fa-text-width
fa-align-left
fa-align-center
fa-align-right
fa-align-justify
fa-list
fa-dedent
fa-outdent
fa-indent
fa-video-camera
fa-photo
fa-image
fa-picture-o
fa-pencil
fa-map-marker
fa-adjust
fa-tint
fa-edit
fa-pencil-square-o
fa-check-square-o
fa-arrows
fa-step-backward
fa-fast-backward
fa-backward
fa-play
fa-pause
fa-stop
fa-forward
fa-fast-forward
fa-step-forward
fa-eject
fa-chevron-left
fa-chevron-right
fa-plus-circle
fa-minus-circle
fa-times-circle
fa-check-circle
fa-question-circle
fa-info-circle
fa-crosshairs
fa-times-circle-o
fa-check-circle-o
fa-ban
fa-arrow-left
fa-arrow-right
fa-arrow-up
fa-arrow-down
fa-mail-forward
fa-share
fa-compress
fa-plus
fa-minus
fa-asterisk
fa-exclamation-circle
fa-gift
fa-leaf
fa-fire
fa-eye
fa-eye-slash
fa-warning
fa-exclamation-triangle
fa-plane
fa-calendar
fa-random
fa-comment
fa-magnet
fa-chevron-up
fa-chevron-down
fa-retweet
fa-shopping-cart
fa-folder
fa-folder-open
fa-arrows-v
fa-arrows-h
fa-twitter-square
fa-facebook-square
fa-camera-retro
fa-key
fa-gears
fa-cogs
fa-comments
fa-thumbs-o-up
fa-thumbs-o-down
fa-star-half
fa-heart-o
fa-sign-out
fa-linkedin-square
fa-thumb-tack
fa-external-link
fa-sign-in
fa-trophy
fa-github-square
fa-upload
fa-lemon-o
fa-phone
fa-square-o
fa-bookmark-o
fa-phone-square
fa-twitter
fa-facebook
fa-github
fa-unlock
fa-credit-card
fa-rss
fa-hdd-o
fa-bullhorn
fa-bell
fa-certificate
fa-hand-o-right
fa-hand-o-left
fa-hand-o-up
fa-hand-o-down
fa-arrow-circle-left
fa-arrow-circle-right
fa-arrow-circle-up
fa-arrow-circle-down
fa-globe
fa-wrench
fa-tasks
fa-filter
fa-briefcase
fa-arrows-alt
fa-group
fa-users
fa-chain
fa-link
fa-cloud
fa-flask
fa-cut
fa-scissors
fa-copy
fa-files-o
fa-paperclip
fa-save
fa-floppy-o
fa-square
fa-navicon
fa-reorder
fa-list-ul
fa-list-ol
fa-strikethrough
fa-underline
fa-table
fa-magic
fa-truck
fa-pinterest
fa-pinterest-square
fa-google-plus-square
fa-google-plus
fa-money
fa-caret-down
fa-caret-up
fa-caret-left
fa-caret-right
fa-columns
fa-unsorted
fa-sort
fa-sort-down
fa-sort-desc
fa-sort-up
fa-sort-asc
fa-envelope
fa-linkedin
fa-rotate-left
fa-undo
fa-legal
fa-gavel
fa-dashboard
fa-tachometer
fa-comment-o
fa-comments-o
fa-flash
fa-bolt
fa-sitemap
fa-umbrella
fa-paste
fa-clipboard
fa-lightbulb-o
fa-exchange
fa-cloud-download
fa-cloud-upload
fa-user-md
fa-stethoscope
fa-suitcase
fa-bell-o
fa-coffee
fa-cutlery
fa-file-text-o
fa-building-o
fa-hospital-o
fa-ambulance
fa-medkit
fa-fighter-jet
fa-beer
fa-h-square
fa-plus-square
fa-angle-double-left
fa-angle-double-right
fa-angle-double-up
fa-angle-double-down
fa-angle-left
fa-angle-right
fa-angle-up
fa-angle-down
fa-desktop
fa-laptop
fa-tablet
fa-mobile-phone
fa-mobile
fa-circle-o
fa-quote-left
fa-quote-right
fa-spinner
fa-circle
fa-mail-reply
fa-reply
fa-github-alt
fa-folder-o
fa-folder-open-o
fa-smile-o
fa-frown-o
fa-meh-o
fa-gamepad
fa-keyboard-o
fa-flag-o
fa-flag-checkered
fa-terminal
fa-code
fa-mail-reply-all
fa-reply-all
fa-star-half-empty
fa-star-half-full
fa-star-half-o
fa-location-arrow
fa-crop
fa-code-fork
fa-unlink
fa-chain-broken
fa-question
fa-info
fa-exclamation
fa-superscript
fa-subscript
fa-eraser
fa-puzzle-piece
fa-microphone
fa-microphone-slash
fa-shield
fa-calendar-o
fa-fire-extinguisher
fa-rocket
fa-maxcdn
fa-chevron-circle-left
fa-chevron-circle-right
fa-chevron-circle-up
fa-chevron-circle-down
fa-html5
fa-css3
fa-anchor
fa-unlock-alt
fa-bullseye
fa-ellipsis-h
fa-ellipsis-v
fa-rss-square
fa-play-circle
fa-ticket
fa-minus-square
fa-minus-square-o
fa-level-up
fa-level-down
fa-check-square
fa-pencil-square
fa-external-link-square
fa-compass
fa-toggle-down
fa-caret-square-o-down
fa-toggle-up
fa-caret-square-o-up
fa-toggle-right
fa-caret-square-o-right
fa-euro
fa-eur
fa-gbp
fa-dollar
fa-usd
fa-rupee
fa-inr
fa-cny
fa-rmb
fa-yen
fa-jpy
fa-ruble
fa-rouble
fa-rub
fa-won
fa-krw
fa-bitcoin
fa-btc
fa-file
fa-file-text
fa-sort-alpha-asc
fa-sort-alpha-desc
fa-sort-amount-asc
fa-sort-amount-desc
fa-sort-numeric-asc
fa-sort-numeric-desc
fa-thumbs-up
fa-thumbs-down
fa-youtube-square
fa-youtube
fa-xing
fa-xing-square
fa-youtube-play
fa-dropbox
fa-stack-overflow
fa-instagram
fa-flickr
fa-adn
fa-bitbucket
fa-bitbucket-square
fa-tumblr
fa-tumblr-square
fa-long-arrow-down
fa-long-arrow-up
fa-long-arrow-left
fa-long-arrow-right
fa-apple
fa-windows
fa-android
fa-linux
fa-dribbble
fa-skype
fa-foursquare
fa-trello
fa-female
fa-male
fa-gittip
fa-sun-o
fa-moon-o
fa-archive
fa-bug
fa-vk
fa-weibo
fa-renren
fa-pagelines
fa-stack-exchange
fa-arrow-circle-o-right
fa-arrow-circle-o-left
fa-toggle-left
fa-caret-square-o-left
fa-dot-circle-o
fa-wheelchair
fa-vimeo-square
fa-turkish-lira
fa-try
fa-plus-square-o
fa-space-shuttle
fa-slack
fa-envelope-square
fa-wordpress
fa-openid
fa-institution
fa-bank
fa-university
fa-mortar-board
fa-graduation-cap
fa-yahoo
fa-google
fa-reddit
fa-reddit-square
fa-stumbleupon-circle
fa-stumbleupon
fa-delicious
fa-digg
fa-pied-piper-square
fa-pied-piper
fa-pied-piper-alt
fa-drupal
fa-joomla
fa-language
fa-fax
fa-building
fa-child
fa-paw
fa-spoon
fa-cube
fa-cubes
fa-behance
fa-behance-square
fa-steam
fa-steam-square
fa-recycle
fa-automobile
fa-car
fa-cab
fa-taxi
fa-tree
fa-spotify
fa-deviantart
fa-soundcloud
fa-database
fa-file-pdf-o
fa-file-word-o
fa-file-excel-o
fa-file-powerpoint-o
fa-file-photo-o
fa-file-picture-o
fa-file-image-o
fa-file-zip-o
fa-file-archive-o
fa-file-sound-o
fa-file-audio-o
fa-file-movie-o
fa-file-video-o
fa-file-code-o
fa-vine
fa-codepen
fa-jsfiddle
fa-life-bouy
fa-life-saver
fa-support
fa-life-ring
fa-circle-o-notch
fa-ra
fa-rebel
fa-ge
fa-empire
fa-git-square
fa-git
fa-hacker-news
fa-tencent-weibo
fa-qq
fa-wechat
fa-weixin
fa-send
fa-paper-plane
fa-send-o
fa-paper-plane-o
fa-history
fa-circle-thin
fa-header
fa-paragraph
fa-bomb
