admin
by on July 11, 2018
601 views

Lama tidak mengunjungi website aslinya, ternyata font awesome telah lama diluncurkan dengan lebih banyak ikon menarik. Tidak ada salahnya untuk mencoba font awesome 5, walaupun menurut saya font-awesome 4 sudah cukup dengan ikon yang disediakan pada saat ini. Dari segi instalasi dan penggunaan memiliki sedikit perbedaan dengan generasi sebelumnya.

Instalasi

Untuk menginstall font awesome 5, silahkan download dari web aslinya dan ekstrak ke folder yang diinginkan. Pada header tambahkan skrip untuk memanggil font awesome sesuai dengan lokasi instalasi, contoh:

<link rel="stylesheet" href="lokasi-file/css/all.css">

Sedangkan jika ingin lansung menggunakan dari CDN yang disediakn font awesome, bisa dengan menambahkan skrip berikut di bagian header:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

Penggunaan

Tidak jauh berbeda dengan versi sebelumnya, penggunan font awesome 5 bisa menggunakan pola seperti

<i class="fas fa-user-alt"></i> yang menghasilkan ikon seperti
<i class="fab fa-accessible-icon"></i> yang menghasilkan ikon seperti

Berikut daftar kode lengkap font awesome bisa dilihat pada table berikut :

ICON
KODE
ICON
KODE
fa-accessible-iconfa-keycdn
fa-accusoftfa-kickstarter
fa-address-bookfa-kickstarter-k
fa-address-cardfa-kiwi-bird
fa-adjustfa-korvue
fa-adnfa-language
fa-adversalfa-laptop
fa-affiliatethemefa-laravel
fa-algoliafa-lastfm
fa-align-centerfa-lastfm-square
fa-align-justifyfa-leaf
fa-align-leftfa-leanpub
fa-align-rightfa-lemon
fa-allergiesfa-less
fa-amazonfa-less-than
fa-amazon-payfa-less-than-equal
fa-ambulancefa-level-down-alt
fa-american-sign-language-interpretingfa-level-up-alt
fa-amiliafa-life-ring
fa-anchorfa-lightbulb
fa-androidfa-line
fa-angellistfa-link
fa-angle-double-downfa-linkedin
fa-angle-double-leftfa-linkedin-in
fa-angle-double-rightfa-linode
fa-angle-double-upfa-linux
fa-angle-downfa-lira-sign
fa-angle-leftfa-list
fa-angle-rightfa-list-alt
fa-angle-upfa-list-ol
fa-angrycreativefa-list-ul
fa-angularfa-location-arrow
fa-app-storefa-lock
fa-app-store-iosfa-lock-open
fa-apperfa-long-arrow-alt-down
fa-applefa-long-arrow-alt-left
fa-apple-payfa-long-arrow-alt-right
fa-archivefa-long-arrow-alt-up
fa-arrow-alt-circle-downfa-low-vision
fa-arrow-alt-circle-leftfa-lyft
fa-arrow-alt-circle-rightfa-magento
fa-arrow-alt-circle-upfa-magic
fa-arrow-circle-downfa-magnet
fa-arrow-circle-leftfa-male
fa-arrow-circle-rightfa-mandalorian
fa-arrow-circle-upfa-map
fa-arrow-downfa-map-marker
fa-arrow-leftfa-map-marker-alt
fa-arrow-rightfa-map-pin
fa-arrow-upfa-map-signs
fa-arrows-altfa-mars
fa-arrows-alt-hfa-mars-double
fa-arrows-alt-vfa-mars-stroke
fa-assistive-listening-systemsfa-mars-stroke-h
fa-asteriskfa-mars-stroke-v
fa-asymmetrikfa-mastodon
fa-atfa-maxcdn
fa-audiblefa-medapps
fa-audio-descriptionfa-medium
fa-autoprefixerfa-medium-m
fa-avianexfa-medkit
fa-aviatofa-medrt
fa-awsfa-meetup
fa-backwardfa-meh
fa-balance-scalefa-memory
fa-banfa-mercury
fa-band-aidfa-microchip
fa-bandcampfa-microphone
fa-barcodefa-microphone-alt
fa-barsfa-microphone-alt-slash
fa-baseball-ballfa-microphone-slash
fa-basketball-ballfa-microsoft
fa-bathfa-minus
fa-battery-emptyfa-minus-circle
fa-battery-fullfa-minus-square
fa-battery-halffa-mix
fa-battery-quarterfa-mixcloud
fa-battery-three-quartersfa-mizuni
fa-bedfa-mobile
fa-beerfa-mobile-alt
fa-behancefa-modx
fa-behance-squarefa-monero
fa-bellfa-money-bill
fa-bell-slashfa-money-bill-alt
fa-bicyclefa-money-bill-wave
fa-bimobjectfa-money-bill-wave-alt
fa-binocularsfa-money-check
fa-birthday-cakefa-money-check-alt
fa-bitbucketfa-moon
fa-bitcoinfa-motorcycle
fa-bityfa-mouse-pointer
fa-black-tiefa-music
fa-blackberryfa-napster
fa-blenderfa-neuter
fa-blindfa-newspaper
fa-bloggerfa-nintendo-switch
fa-blogger-bfa-node
fa-bluetoothfa-node-js
fa-bluetooth-bfa-not-equal
fa-boldfa-notes-medical
fa-boltfa-npm
fa-bombfa-ns8
fa-bookfa-nutritionix
fa-book-openfa-object-group
fa-bookmarkfa-object-ungroup
fa-bowling-ballfa-odnoklassniki
fa-boxfa-odnoklassniki-square
fa-box-openfa-old-republic
fa-boxesfa-opencart
fa-braillefa-openid
fa-briefcasefa-opera
fa-briefcase-medicalfa-optin-monster
fa-broadcast-towerfa-osi
fa-broomfa-outdent
fa-btcfa-page4
fa-bugfa-pagelines
fa-buildingfa-paint-brush
fa-bullhornfa-palette
fa-bullseyefa-palfed
fa-burnfa-pallet
fa-buromobelexpertefa-paper-plane
fa-busfa-paperclip
fa-buyselladsfa-parachute-box
fa-calculatorfa-paragraph
fa-calendarfa-parking
fa-calendar-altfa-paste
fa-calendar-checkfa-patreon
fa-calendar-minusfa-pause
fa-calendar-plusfa-pause-circle
fa-calendar-timesfa-paw
fa-camerafa-paypal
fa-camera-retrofa-pen-square
fa-capsulesfa-pencil-alt
fa-carfa-people-carry
fa-caret-downfa-percent
fa-caret-leftfa-percentage
fa-caret-rightfa-periscope
fa-caret-square-downfa-phabricator
fa-caret-square-leftfa-phoenix-framework
fa-caret-square-rightfa-phoenix-squadron
fa-caret-square-upfa-phone
fa-caret-upfa-phone-slash
fa-cart-arrow-downfa-phone-square
fa-cart-plusfa-phone-volume
fa-cc-amazon-payfa-php
fa-cc-amexfa-pied-piper
fa-cc-apple-payfa-pied-piper-alt
fa-cc-diners-clubfa-pied-piper-hat
fa-cc-discoverfa-pied-piper-pp
fa-cc-jcbfa-piggy-bank
fa-cc-mastercardfa-pills
fa-cc-paypalfa-pinterest
fa-cc-stripefa-pinterest-p
fa-cc-visafa-pinterest-square
fa-centercodefa-plane
fa-certificatefa-play
fa-chalkboardfa-play-circle
fa-chalkboard-teacherfa-playstation
fa-chart-areafa-plug
fa-chart-barfa-plus
fa-chart-linefa-plus-circle
fa-chart-piefa-plus-square
fa-checkfa-podcast
fa-check-circlefa-poo
fa-check-squarefa-portrait
fa-chessfa-pound-sign
fa-chess-bishopfa-power-off
fa-chess-boardfa-prescription-bottle
fa-chess-kingfa-prescription-bottle-alt
fa-chess-knightfa-print
fa-chess-pawnfa-procedures
fa-chess-queenfa-product-hunt
fa-chess-rookfa-project-diagram
fa-chevron-circle-downfa-pushed
fa-chevron-circle-leftfa-puzzle-piece
fa-chevron-circle-rightfa-python
fa-chevron-circle-upfa-qq
fa-chevron-downfa-qrcode
fa-chevron-leftfa-question
fa-chevron-rightfa-question-circle
fa-chevron-upfa-quidditch
fa-childfa-quinscape
fa-chromefa-quora
fa-churchfa-quote-left
fa-circlefa-quote-right
fa-circle-notchfa-r-project
fa-clipboardfa-random
fa-clipboard-checkfa-ravelry
fa-clipboard-listfa-react
fa-clockfa-readme
fa-clonefa-rebel
fa-closed-captioningfa-receipt
fa-cloudfa-recycle
fa-cloud-download-altfa-red-river
fa-cloud-upload-altfa-reddit
fa-cloudscalefa-reddit-alien
fa-cloudsmithfa-reddit-square
fa-cloudversifyfa-redo
fa-codefa-redo-alt
fa-code-branchfa-registered
fa-codepenfa-rendact
fa-codiepiefa-renren
fa-coffeefa-reply
fa-cogfa-reply-all
fa-cogsfa-replyd
fa-coinsfa-researchgate
fa-columnsfa-resolving
fa-commentfa-retweet
fa-comment-altfa-ribbon
fa-comment-dotsfa-road
fa-comment-slashfa-robot
fa-commentsfa-rocket
fa-compact-discfa-rocketchat
fa-compassfa-rockrms
fa-compressfa-rss
fa-connectdevelopfa-rss-square
fa-contaofa-ruble-sign
fa-copyfa-ruler
fa-copyrightfa-ruler-combined
fa-couchfa-ruler-horizontal
fa-cpanelfa-ruler-vertical
fa-creative-commonsfa-rupee-sign
fa-creative-commons-byfa-safari
fa-creative-commons-ncfa-sass
fa-creative-commons-nc-eufa-save
fa-creative-commons-nc-jpfa-schlix
fa-creative-commons-ndfa-school
fa-creative-commons-pdfa-screwdriver
fa-creative-commons-pd-altfa-scribd
fa-creative-commons-remixfa-search
fa-creative-commons-safa-search-minus
fa-creative-commons-samplingfa-search-plus
fa-creative-commons-sampling-plusfa-searchengin
fa-creative-commons-sharefa-seedling
fa-credit-cardfa-sellcast
fa-cropfa-sellsy
fa-crosshairsfa-server
fa-crowfa-servicestack
fa-crownfa-share
fa-css3fa-share-alt
fa-css3-altfa-share-alt-square
fa-cubefa-share-square
fa-cubesfa-shekel-sign
fa-cutfa-shield-alt
fa-cuttlefishfa-ship
fa-d-and-dfa-shipping-fast
fa-dashcubefa-shirtsinbulk
fa-databasefa-shoe-prints
fa-deaffa-shopping-bag
fa-deliciousfa-shopping-basket
fa-deploydogfa-shopping-cart
fa-deskprofa-shower
fa-desktopfa-sign
fa-deviantartfa-sign-in-alt
fa-diagnosesfa-sign-language
fa-dicefa-sign-out-alt
fa-dice-fivefa-signal
fa-dice-fourfa-simplybuilt
fa-dice-onefa-sistrix
fa-dice-sixfa-sitemap
fa-dice-threefa-sith
fa-dice-twofa-skull
fa-diggfa-skyatlas
fa-digital-oceanfa-skype
fa-discordfa-slack
fa-discoursefa-slack-hash
fa-dividefa-sliders-h
fa-dnafa-slideshare
fa-dochubfa-smile
fa-dockerfa-smoking
fa-dollar-signfa-smoking-ban
fa-dollyfa-snapchat
fa-dolly-flatbedfa-snapchat-ghost
fa-donatefa-snapchat-square
fa-door-closedfa-snowflake
fa-door-openfa-sort
fa-dot-circlefa-sort-alpha-down
fa-dovefa-sort-alpha-up
fa-downloadfa-sort-amount-down
fa-draft2digitalfa-sort-amount-up
fa-dribbblefa-sort-down
fa-dribbble-squarefa-sort-numeric-down
fa-dropboxfa-sort-numeric-up
fa-drupalfa-sort-up
fa-dumbbellfa-soundcloud
fa-dyalogfa-space-shuttle
fa-earlybirdsfa-speakap
fa-ebayfa-spinner
fa-edgefa-spotify
fa-editfa-square
fa-ejectfa-square-full
fa-elementorfa-stack-exchange
fa-ellipsis-hfa-stack-overflow
fa-ellipsis-vfa-star
fa-emberfa-star-half
fa-empirefa-staylinked
fa-envelopefa-steam
fa-envelope-openfa-steam-square
fa-envelope-squarefa-steam-symbol
fa-envirafa-step-backward
fa-equalsfa-step-forward
fa-eraserfa-stethoscope
fa-erlangfa-sticker-mule
fa-ethereumfa-sticky-note
fa-etsyfa-stop
fa-euro-signfa-stop-circle
fa-exchange-altfa-stopwatch
fa-exclamationfa-store
fa-exclamation-circlefa-store-alt
fa-exclamation-trianglefa-strava
fa-expandfa-stream
fa-expand-arrows-altfa-street-view
fa-expeditedsslfa-strikethrough
fa-external-link-altfa-stripe
fa-external-link-square-altfa-stripe-s
fa-eyefa-stroopwafel
fa-eye-dropperfa-studiovinari
fa-eye-slashfa-stumbleupon
fa-facebookfa-stumbleupon-circle
fa-facebook-ffa-subscript
fa-facebook-messengerfa-subway
fa-facebook-squarefa-suitcase
fa-fast-backwardfa-sun
fa-fast-forwardfa-superpowers
fa-faxfa-superscript
fa-featherfa-supple
fa-femalefa-sync
fa-fighter-jetfa-sync-alt
fa-filefa-syringe
fa-file-altfa-table
fa-file-archivefa-table-tennis
fa-file-audiofa-tablet
fa-file-codefa-tablet-alt
fa-file-excelfa-tablets
fa-file-imagefa-tachometer-alt
fa-file-medicalfa-tag
fa-file-medical-altfa-tags
fa-file-pdffa-tape
fa-file-powerpointfa-tasks
fa-file-videofa-taxi
fa-file-wordfa-teamspeak
fa-filmfa-telegram
fa-filterfa-telegram-plane
fa-firefa-tencent-weibo
fa-fire-extinguisherfa-terminal
fa-firefoxfa-text-height
fa-first-aidfa-text-width
fa-first-orderfa-th
fa-first-order-altfa-th-large
fa-firstdraftfa-th-list
fa-flagfa-themeisle
fa-flag-checkeredfa-thermometer
fa-flaskfa-thermometer-empty
fa-flickrfa-thermometer-full
fa-flipboardfa-thermometer-half
fa-flyfa-thermometer-quarter
fa-folderfa-thermometer-three-quarters
fa-folder-openfa-thumbs-down
fa-fontfa-thumbs-up
fa-font-awesomefa-thumbtack
fa-font-awesome-altfa-ticket-alt
fa-font-awesome-flagfa-times
fa-font-awesome-logo-fullfa-times-circle
fa-fonticonsfa-tint
fa-fonticons-fifa-toggle-off
fa-football-ballfa-toggle-on
fa-fort-awesomefa-toolbox
fa-fort-awesome-altfa-trade-federation
fa-forumbeefa-trademark
fa-forwardfa-train
fa-foursquarefa-transgender
fa-free-code-campfa-transgender-alt
fa-freebsdfa-trash
fa-frogfa-trash-alt
fa-frownfa-tree
fa-fulcrumfa-trello
fa-futbolfa-tripadvisor
fa-galactic-republicfa-trophy
fa-galactic-senatefa-truck
fa-gamepadfa-truck-loading
fa-gas-pumpfa-truck-moving
fa-gavelfa-tshirt
fa-gemfa-tty
fa-genderlessfa-tumblr
fa-get-pocketfa-tumblr-square
fa-ggfa-tv
fa-gg-circlefa-twitch
fa-giftfa-twitter
fa-gitfa-twitter-square
fa-git-squarefa-typo3
fa-githubfa-uber
fa-github-altfa-uikit
fa-github-squarefa-umbrella
fa-gitkrakenfa-underline
fa-gitlabfa-undo
fa-gitterfa-undo-alt
fa-glass-martinifa-uniregistry
fa-glassesfa-universal-access
fa-glidefa-university
fa-glide-gfa-unlink
fa-globefa-unlock
fa-goforefa-unlock-alt
fa-golf-ballfa-untappd
fa-goodreadsfa-upload
fa-goodreads-gfa-usb
fa-googlefa-user
fa-google-drivefa-user-alt
fa-google-playfa-user-alt-slash
fa-google-plusfa-user-astronaut
fa-google-plus-gfa-user-check
fa-google-plus-squarefa-user-circle
fa-google-walletfa-user-clock
fa-graduation-capfa-user-cog
fa-gratipayfa-user-edit
fa-gravfa-user-friends
fa-greater-thanfa-user-graduate
fa-greater-than-equalfa-user-lock
fa-gripfirefa-user-md
fa-gruntfa-user-minus
fa-gulpfa-user-ninja
fa-h-squarefa-user-plus
fa-hacker-newsfa-user-secret
fa-hacker-news-squarefa-user-shield
fa-hand-holdingfa-user-slash
fa-hand-holding-heartfa-user-tag
fa-hand-holding-usdfa-user-tie
fa-hand-lizardfa-user-times
fa-hand-paperfa-users
fa-hand-peacefa-users-cog
fa-hand-point-downfa-ussunnah
fa-hand-point-leftfa-utensil-spoon
fa-hand-point-rightfa-utensils
fa-hand-point-upfa-vaadin
fa-hand-pointerfa-venus
fa-hand-rockfa-venus-double
fa-hand-scissorsfa-venus-mars
fa-hand-spockfa-viacoin
fa-handsfa-viadeo
fa-hands-helpingfa-viadeo-square
fa-handshakefa-vial
fa-hashtagfa-vials
fa-hddfa-viber
fa-headingfa-video
fa-headphonesfa-video-slash
fa-heartfa-vimeo
fa-heartbeatfa-vimeo-square
fa-helicopterfa-vimeo-v
fa-hipsfa-vine
fa-hire-a-helperfa-vk
fa-historyfa-vnv
fa-hockey-puckfa-volleyball-ball
fa-homefa-volume-down
fa-hoolifa-volume-off
fa-hospitalfa-volume-up
fa-hospital-altfa-vuejs
fa-hospital-symbolfa-walking
fa-hotjarfa-wallet
fa-hourglassfa-warehouse
fa-hourglass-endfa-weibo
fa-hourglass-halffa-weight
fa-hourglass-startfa-weixin
fa-houzzfa-whatsapp
fa-html5fa-whatsapp-square
fa-hubspotfa-wheelchair
fa-i-cursorfa-whmcs
fa-id-badgefa-wifi
fa-id-cardfa-wikipedia-w
fa-id-card-altfa-window-close
fa-imagefa-window-maximize
fa-imagesfa-window-minimize
fa-imdbfa-window-restore
fa-inboxfa-windows
fa-indentfa-wine-glass
fa-industryfa-wolf-pack-battalion
fa-infinityfa-won-sign
fa-infofa-wordpress
fa-info-circlefa-wordpress-simple
fa-instagramfa-wpbeginner
fa-internet-explorerfa-wpexplorer
fa-ioxhostfa-wpforms
fa-italicfa-wrench
fa-itunesfa-x-ray
fa-itunes-notefa-xbox
fa-javafa-xing
fa-jedi-orderfa-xing-square
fa-jenkinsfa-y-combinator
fa-jogetfa-yahoo
fa-joomlafa-yandex
fa-jsfa-yandex-international
fa-js-squarefa-yelp
fa-jsfiddlefa-yen-sign
fa-keyfa-yoast
fa-keybasefa-youtube
fa-keyboardfa-youtube-square
Be the first person to like this.