admin
by on July 11, 2018
1,295 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-icon fa-keycdn
fa-accusoft fa-kickstarter
fa-address-book fa-kickstarter-k
fa-address-card fa-kiwi-bird
fa-adjust fa-korvue
fa-adn fa-language
fa-adversal fa-laptop
fa-affiliatetheme fa-laravel
fa-algolia fa-lastfm
fa-align-center fa-lastfm-square
fa-align-justify fa-leaf
fa-align-left fa-leanpub
fa-align-right fa-lemon
fa-allergies fa-less
fa-amazon fa-less-than
fa-amazon-pay fa-less-than-equal
fa-ambulance fa-level-down-alt
fa-american-sign-language-interpreting fa-level-up-alt
fa-amilia fa-life-ring
fa-anchor fa-lightbulb
fa-android fa-line
fa-angellist fa-link
fa-angle-double-down fa-linkedin
fa-angle-double-left fa-linkedin-in
fa-angle-double-right fa-linode
fa-angle-double-up fa-linux
fa-angle-down fa-lira-sign
fa-angle-left fa-list
fa-angle-right fa-list-alt
fa-angle-up fa-list-ol
fa-angrycreative fa-list-ul
fa-angular fa-location-arrow
fa-app-store fa-lock
fa-app-store-ios fa-lock-open
fa-apper fa-long-arrow-alt-down
fa-apple fa-long-arrow-alt-left
fa-apple-pay fa-long-arrow-alt-right
fa-archive fa-long-arrow-alt-up
fa-arrow-alt-circle-down fa-low-vision
fa-arrow-alt-circle-left fa-lyft
fa-arrow-alt-circle-right fa-magento
fa-arrow-alt-circle-up fa-magic
fa-arrow-circle-down fa-magnet
fa-arrow-circle-left fa-male
fa-arrow-circle-right fa-mandalorian
fa-arrow-circle-up fa-map
fa-arrow-down fa-map-marker
fa-arrow-left fa-map-marker-alt
fa-arrow-right fa-map-pin
fa-arrow-up fa-map-signs
fa-arrows-alt fa-mars
fa-arrows-alt-h fa-mars-double
fa-arrows-alt-v fa-mars-stroke
fa-assistive-listening-systems fa-mars-stroke-h
fa-asterisk fa-mars-stroke-v
fa-asymmetrik fa-mastodon
fa-at fa-maxcdn
fa-audible fa-medapps
fa-audio-description fa-medium
fa-autoprefixer fa-medium-m
fa-avianex fa-medkit
fa-aviato fa-medrt
fa-aws fa-meetup
fa-backward fa-meh
fa-balance-scale fa-memory
fa-ban fa-mercury
fa-band-aid fa-microchip
fa-bandcamp fa-microphone
fa-barcode fa-microphone-alt
fa-bars fa-microphone-alt-slash
fa-baseball-ball fa-microphone-slash
fa-basketball-ball fa-microsoft
fa-bath fa-minus
fa-battery-empty fa-minus-circle
fa-battery-full fa-minus-square
fa-battery-half fa-mix
fa-battery-quarter fa-mixcloud
fa-battery-three-quarters fa-mizuni
fa-bed fa-mobile
fa-beer fa-mobile-alt
fa-behance fa-modx
fa-behance-square fa-monero
fa-bell fa-money-bill
fa-bell-slash fa-money-bill-alt
fa-bicycle fa-money-bill-wave
fa-bimobject fa-money-bill-wave-alt
fa-binoculars fa-money-check
fa-birthday-cake fa-money-check-alt
fa-bitbucket fa-moon
fa-bitcoin fa-motorcycle
fa-bity fa-mouse-pointer
fa-black-tie fa-music
fa-blackberry fa-napster
fa-blender fa-neuter
fa-blind fa-newspaper
fa-blogger fa-nintendo-switch
fa-blogger-b fa-node
fa-bluetooth fa-node-js
fa-bluetooth-b fa-not-equal
fa-bold fa-notes-medical
fa-bolt fa-npm
fa-bomb fa-ns8
fa-book fa-nutritionix
fa-book-open fa-object-group
fa-bookmark fa-object-ungroup
fa-bowling-ball fa-odnoklassniki
fa-box fa-odnoklassniki-square
fa-box-open fa-old-republic
fa-boxes fa-opencart
fa-braille fa-openid
fa-briefcase fa-opera
fa-briefcase-medical fa-optin-monster
fa-broadcast-tower fa-osi
fa-broom fa-outdent
fa-btc fa-page4
fa-bug fa-pagelines
fa-building fa-paint-brush
fa-bullhorn fa-palette
fa-bullseye fa-palfed
fa-burn fa-pallet
fa-buromobelexperte fa-paper-plane
fa-bus fa-paperclip
fa-buysellads fa-parachute-box
fa-calculator fa-paragraph
fa-calendar fa-parking
fa-calendar-alt fa-paste
fa-calendar-check fa-patreon
fa-calendar-minus fa-pause
fa-calendar-plus fa-pause-circle
fa-calendar-times fa-paw
fa-camera fa-paypal
fa-camera-retro fa-pen-square
fa-capsules fa-pencil-alt
fa-car fa-people-carry
fa-caret-down fa-percent
fa-caret-left fa-percentage
fa-caret-right fa-periscope
fa-caret-square-down fa-phabricator
fa-caret-square-left fa-phoenix-framework
fa-caret-square-right fa-phoenix-squadron
fa-caret-square-up fa-phone
fa-caret-up fa-phone-slash
fa-cart-arrow-down fa-phone-square
fa-cart-plus fa-phone-volume
fa-cc-amazon-pay fa-php
fa-cc-amex fa-pied-piper
fa-cc-apple-pay fa-pied-piper-alt
fa-cc-diners-club fa-pied-piper-hat
fa-cc-discover fa-pied-piper-pp
fa-cc-jcb fa-piggy-bank
fa-cc-mastercard fa-pills
fa-cc-paypal fa-pinterest
fa-cc-stripe fa-pinterest-p
fa-cc-visa fa-pinterest-square
fa-centercode fa-plane
fa-certificate fa-play
fa-chalkboard fa-play-circle
fa-chalkboard-teacher fa-playstation
fa-chart-area fa-plug
fa-chart-bar fa-plus
fa-chart-line fa-plus-circle
fa-chart-pie fa-plus-square
fa-check fa-podcast
fa-check-circle fa-poo
fa-check-square fa-portrait
fa-chess fa-pound-sign
fa-chess-bishop fa-power-off
fa-chess-board fa-prescription-bottle
fa-chess-king fa-prescription-bottle-alt
fa-chess-knight fa-print
fa-chess-pawn fa-procedures
fa-chess-queen fa-product-hunt
fa-chess-rook fa-project-diagram
fa-chevron-circle-down fa-pushed
fa-chevron-circle-left fa-puzzle-piece
fa-chevron-circle-right fa-python
fa-chevron-circle-up fa-qq
fa-chevron-down fa-qrcode
fa-chevron-left fa-question
fa-chevron-right fa-question-circle
fa-chevron-up fa-quidditch
fa-child fa-quinscape
fa-chrome fa-quora
fa-church fa-quote-left
fa-circle fa-quote-right
fa-circle-notch fa-r-project
fa-clipboard fa-random
fa-clipboard-check fa-ravelry
fa-clipboard-list fa-react
fa-clock fa-readme
fa-clone fa-rebel
fa-closed-captioning fa-receipt
fa-cloud fa-recycle
fa-cloud-download-alt fa-red-river
fa-cloud-upload-alt fa-reddit
fa-cloudscale fa-reddit-alien
fa-cloudsmith fa-reddit-square
fa-cloudversify fa-redo
fa-code fa-redo-alt
fa-code-branch fa-registered
fa-codepen fa-rendact
fa-codiepie fa-renren
fa-coffee fa-reply
fa-cog fa-reply-all
fa-cogs fa-replyd
fa-coins fa-researchgate
fa-columns fa-resolving
fa-comment fa-retweet
fa-comment-alt fa-ribbon
fa-comment-dots fa-road
fa-comment-slash fa-robot
fa-comments fa-rocket
fa-compact-disc fa-rocketchat
fa-compass fa-rockrms
fa-compress fa-rss
fa-connectdevelop fa-rss-square
fa-contao fa-ruble-sign
fa-copy fa-ruler
fa-copyright fa-ruler-combined
fa-couch fa-ruler-horizontal
fa-cpanel fa-ruler-vertical
fa-creative-commons fa-rupee-sign
fa-creative-commons-by fa-safari
fa-creative-commons-nc fa-sass
fa-creative-commons-nc-eu fa-save
fa-creative-commons-nc-jp fa-schlix
fa-creative-commons-nd fa-school
fa-creative-commons-pd fa-screwdriver
fa-creative-commons-pd-alt fa-scribd
fa-creative-commons-remix fa-search
fa-creative-commons-sa fa-search-minus
fa-creative-commons-sampling fa-search-plus
fa-creative-commons-sampling-plus fa-searchengin
fa-creative-commons-share fa-seedling
fa-credit-card fa-sellcast
fa-crop fa-sellsy
fa-crosshairs fa-server
fa-crow fa-servicestack
fa-crown fa-share
fa-css3 fa-share-alt
fa-css3-alt fa-share-alt-square
fa-cube fa-share-square
fa-cubes fa-shekel-sign
fa-cut fa-shield-alt
fa-cuttlefish fa-ship
fa-d-and-d fa-shipping-fast
fa-dashcube fa-shirtsinbulk
fa-database fa-shoe-prints
fa-deaf fa-shopping-bag
fa-delicious fa-shopping-basket
fa-deploydog fa-shopping-cart
fa-deskpro fa-shower
fa-desktop fa-sign
fa-deviantart fa-sign-in-alt
fa-diagnoses fa-sign-language
fa-dice fa-sign-out-alt
fa-dice-five fa-signal
fa-dice-four fa-simplybuilt
fa-dice-one fa-sistrix
fa-dice-six fa-sitemap
fa-dice-three fa-sith
fa-dice-two fa-skull
fa-digg fa-skyatlas
fa-digital-ocean fa-skype
fa-discord fa-slack
fa-discourse fa-slack-hash
fa-divide fa-sliders-h
fa-dna fa-slideshare
fa-dochub fa-smile
fa-docker fa-smoking
fa-dollar-sign fa-smoking-ban
fa-dolly fa-snapchat
fa-dolly-flatbed fa-snapchat-ghost
fa-donate fa-snapchat-square
fa-door-closed fa-snowflake
fa-door-open fa-sort
fa-dot-circle fa-sort-alpha-down
fa-dove fa-sort-alpha-up
fa-download fa-sort-amount-down
fa-draft2digital fa-sort-amount-up
fa-dribbble fa-sort-down
fa-dribbble-square fa-sort-numeric-down
fa-dropbox fa-sort-numeric-up
fa-drupal fa-sort-up
fa-dumbbell fa-soundcloud
fa-dyalog fa-space-shuttle
fa-earlybirds fa-speakap
fa-ebay fa-spinner
fa-edge fa-spotify
fa-edit fa-square
fa-eject fa-square-full
fa-elementor fa-stack-exchange
fa-ellipsis-h fa-stack-overflow
fa-ellipsis-v fa-star
fa-ember fa-star-half
fa-empire fa-staylinked
fa-envelope fa-steam
fa-envelope-open fa-steam-square
fa-envelope-square fa-steam-symbol
fa-envira fa-step-backward
fa-equals fa-step-forward
fa-eraser fa-stethoscope
fa-erlang fa-sticker-mule
fa-ethereum fa-sticky-note
fa-etsy fa-stop
fa-euro-sign fa-stop-circle
fa-exchange-alt fa-stopwatch
fa-exclamation fa-store
fa-exclamation-circle fa-store-alt
fa-exclamation-triangle fa-strava
fa-expand fa-stream
fa-expand-arrows-alt fa-street-view
fa-expeditedssl fa-strikethrough
fa-external-link-alt fa-stripe
fa-external-link-square-alt fa-stripe-s
fa-eye fa-stroopwafel
fa-eye-dropper fa-studiovinari
fa-eye-slash fa-stumbleupon
fa-facebook fa-stumbleupon-circle
fa-facebook-f fa-subscript
fa-facebook-messenger fa-subway
fa-facebook-square fa-suitcase
fa-fast-backward fa-sun
fa-fast-forward fa-superpowers
fa-fax fa-superscript
fa-feather fa-supple
fa-female fa-sync
fa-fighter-jet fa-sync-alt
fa-file fa-syringe
fa-file-alt fa-table
fa-file-archive fa-table-tennis
fa-file-audio fa-tablet
fa-file-code fa-tablet-alt
fa-file-excel fa-tablets
fa-file-image fa-tachometer-alt
fa-file-medical fa-tag
fa-file-medical-alt fa-tags
fa-file-pdf fa-tape
fa-file-powerpoint fa-tasks
fa-file-video fa-taxi
fa-file-word fa-teamspeak
fa-film fa-telegram
fa-filter fa-telegram-plane
fa-fire fa-tencent-weibo
fa-fire-extinguisher fa-terminal
fa-firefox fa-text-height
fa-first-aid fa-text-width
fa-first-order fa-th
fa-first-order-alt fa-th-large
fa-firstdraft fa-th-list
fa-flag fa-themeisle
fa-flag-checkered fa-thermometer
fa-flask fa-thermometer-empty
fa-flickr fa-thermometer-full
fa-flipboard fa-thermometer-half
fa-fly fa-thermometer-quarter
fa-folder fa-thermometer-three-quarters
fa-folder-open fa-thumbs-down
fa-font fa-thumbs-up
fa-font-awesome fa-thumbtack
fa-font-awesome-alt fa-ticket-alt
fa-font-awesome-flag fa-times
fa-font-awesome-logo-full fa-times-circle
fa-fonticons fa-tint
fa-fonticons-fi fa-toggle-off
fa-football-ball fa-toggle-on
fa-fort-awesome fa-toolbox
fa-fort-awesome-alt fa-trade-federation
fa-forumbee fa-trademark
fa-forward fa-train
fa-foursquare fa-transgender
fa-free-code-camp fa-transgender-alt
fa-freebsd fa-trash
fa-frog fa-trash-alt
fa-frown fa-tree
fa-fulcrum fa-trello
fa-futbol fa-tripadvisor
fa-galactic-republic fa-trophy
fa-galactic-senate fa-truck
fa-gamepad fa-truck-loading
fa-gas-pump fa-truck-moving
fa-gavel fa-tshirt
fa-gem fa-tty
fa-genderless fa-tumblr
fa-get-pocket fa-tumblr-square
fa-gg fa-tv
fa-gg-circle fa-twitch
fa-gift fa-twitter
fa-git fa-twitter-square
fa-git-square fa-typo3
fa-github fa-uber
fa-github-alt fa-uikit
fa-github-square fa-umbrella
fa-gitkraken fa-underline
fa-gitlab fa-undo
fa-gitter fa-undo-alt
fa-glass-martini fa-uniregistry
fa-glasses fa-universal-access
fa-glide fa-university
fa-glide-g fa-unlink
fa-globe fa-unlock
fa-gofore fa-unlock-alt
fa-golf-ball fa-untappd
fa-goodreads fa-upload
fa-goodreads-g fa-usb
fa-google fa-user
fa-google-drive fa-user-alt
fa-google-play fa-user-alt-slash
fa-google-plus fa-user-astronaut
fa-google-plus-g fa-user-check
fa-google-plus-square fa-user-circle
fa-google-wallet fa-user-clock
fa-graduation-cap fa-user-cog
fa-gratipay fa-user-edit
fa-grav fa-user-friends
fa-greater-than fa-user-graduate
fa-greater-than-equal fa-user-lock
fa-gripfire fa-user-md
fa-grunt fa-user-minus
fa-gulp fa-user-ninja
fa-h-square fa-user-plus
fa-hacker-news fa-user-secret
fa-hacker-news-square fa-user-shield
fa-hand-holding fa-user-slash
fa-hand-holding-heart fa-user-tag
fa-hand-holding-usd fa-user-tie
fa-hand-lizard fa-user-times
fa-hand-paper fa-users
fa-hand-peace fa-users-cog
fa-hand-point-down fa-ussunnah
fa-hand-point-left fa-utensil-spoon
fa-hand-point-right fa-utensils
fa-hand-point-up fa-vaadin
fa-hand-pointer fa-venus
fa-hand-rock fa-venus-double
fa-hand-scissors fa-venus-mars
fa-hand-spock fa-viacoin
fa-hands fa-viadeo
fa-hands-helping fa-viadeo-square
fa-handshake fa-vial
fa-hashtag fa-vials
fa-hdd fa-viber
fa-heading fa-video
fa-headphones fa-video-slash
fa-heart fa-vimeo
fa-heartbeat fa-vimeo-square
fa-helicopter fa-vimeo-v
fa-hips fa-vine
fa-hire-a-helper fa-vk
fa-history fa-vnv
fa-hockey-puck fa-volleyball-ball
fa-home fa-volume-down
fa-hooli fa-volume-off
fa-hospital fa-volume-up
fa-hospital-alt fa-vuejs
fa-hospital-symbol fa-walking
fa-hotjar fa-wallet
fa-hourglass fa-warehouse
fa-hourglass-end fa-weibo
fa-hourglass-half fa-weight
fa-hourglass-start fa-weixin
fa-houzz fa-whatsapp
fa-html5 fa-whatsapp-square
fa-hubspot fa-wheelchair
fa-i-cursor fa-whmcs
fa-id-badge fa-wifi
fa-id-card fa-wikipedia-w
fa-id-card-alt fa-window-close
fa-image fa-window-maximize
fa-images fa-window-minimize
fa-imdb fa-window-restore
fa-inbox fa-windows
fa-indent fa-wine-glass
fa-industry fa-wolf-pack-battalion
fa-infinity fa-won-sign
fa-info fa-wordpress
fa-info-circle fa-wordpress-simple
fa-instagram fa-wpbeginner
fa-internet-explorer fa-wpexplorer
fa-ioxhost fa-wpforms
fa-italic fa-wrench
fa-itunes fa-x-ray
fa-itunes-note fa-xbox
fa-java fa-xing
fa-jedi-order fa-xing-square
fa-jenkins fa-y-combinator
fa-joget fa-yahoo
fa-joomla fa-yandex
fa-js fa-yandex-international
fa-js-square fa-yelp
fa-jsfiddle fa-yen-sign
fa-key fa-yoast
fa-keybase fa-youtube
fa-keyboard fa-youtube-square
Be the first person to like this.