Cara Pasang Font Awesome dan List Lengkap Font Awesome

Apa itu Font Awesome

Font Awesome adalah toolkit font dan icon berbasis CSS dan LESS. Yang dibuat oleh Dave Gandy untuk digunakan pada Twitter Bootstrap, yang kemudian dimasukkan ke dalam BootstrapCDN. Font Awesome memiliki pangsa pasar 20% di antara situs web yang menggunakan Font Script pihak ketiga di platform mereka, menempatkannya di posisi kedua setelah Google Fonts.
Sumber : https://en.wikipedia.org/wiki/Font_Awesome

Table of contents

Cara Memasang Font Awesome

Untuk menggunakan ikon Font Awesome, tambahkan html berikut di dalam element <head>...</head> pada halaman HTML atau template yang digunakan :

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Atau anda juga bisa menggunakan html berikut :

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Info : Jika anda ingin mendownload Library Font Awesome, silahkan kunjungi tautan berikut fontawesome.io.

Tips : Gunakan CDN Font Awesome untuk efesiensi dan kecepatan loading halaman.
Saran : Disarankan (bukan berarti tidak boleh ya) jangan menginline css Font Awesome di halaman html, hal tersebut dapat memperbesar ukuran/size perhalaman html.

Perlu diketahui 1 space ataupun karakter baik itu berada pada html, css,dll sama dengan berukuran 1 byte.

Keuntungan menggunakan `cdn` dan `css` eksternal untuk Font Awesome.

Dengan menggunakan CDN akan mempercepat proses pengambilan data pada saat prosses Loading sedang berlangsung.
Dengan menggunakan css eksternal maka pada saat user / pengunjung mengunjungi blog / website kita, maka data css akan otomatis tersimpan dibrowser, dan jika user tersebut mengunjungi kembali blog kita, css yang sudah terimpan dibrowser tidak akan melakukan proses pemuatan data lagi, selama data cache pada browser tidak dihapus atau data dari cdn diperbaharui, (berlaku juga untuk javascript eksternal dan image) tidak berlaku untuk css inline dan javascript inline

Perumpamaannya Begini : Anda pernahkan berkunjung pada sebuah blog / website yang mana saat anda berkunjung untuk pertama kalinya terasa berat dan lambat, tapi saat kunjungan kedua kalinya blog atau website tersebut lebih cepat dan ringan saat dimuat.

Hal tersebut dikarenakan data data seperti css ekternal, image dan javascript ekternal sudah disimpan oleh browser saat kunjungan pertama.

Mungkin Terdapat pro dan kontra dalam penggunaan file eksternal, kebanyakan berasal dari tools untuk Tes kecepatan halaman blog / website. Semuanya kembali kepada pendapat anda.

Keuntungan Menggunakan Font Awesome

Satu Font, 675 Ikon
Sampai dengan version 4.7.0Font Awesome memiliki lebih 675 icon.
Gratis
Font Awesome dapat digunakan secara gratis baik digunakan untuk penggunaan pribadi ataupun yang bersifat Komersil.
Silahkan kunjungi tautan berikut untuk melihat lisensi Font Awesome http://fontawesome.io/license/
Tidak membutuhkan javascript dalam penggunaanya.
CSS Control
Font Awesome dapat dengan mudah dikontrol melalui penggunaan css, baik itu pewarnaan, ukuran dan lain sebagainya.
Retina Displays
Font Awesome adalah ikon yang bersifat vektors, artinya dalam resolusi yang tinggi dan size yang besar akan tetap terihat baik tanpa adanya pecah ataupun blur.
Font Awesome bekerja dengan baik hampir disemua frameworks.

Kekurangan Font Awesome

Dimana ada kelebihan disitu pasti ada kekurangannya, berikut kekurangan dari Font Awesome :

Memerlukan sumber daya tambahan yang mungkin berpengaruh pada loading halaman.
Diperlukan akses Font Awesome Pro atau Premium agar dapat menggunakan fasilitas atau fitur lebih Font Awesome. kunjungi teks link berikut untuk melihat detail http://fontawesome.io/ dan https://fontawesome.com/buy/standard

Cara Menggunakan Font Awesome

Cara ini menggunakan metode penulisan langsung pada html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>

<i class="fa fa-home"></i>
<i class="fa fa-home" style="font-size:45px;"></i>
<i class="fa fa-home" style="font-size:75px; color:magenta;"></i>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
</head>
<body>

<i class="fa fa-home"></i>
<i class="fa fa-home" style="font-size:45px;"></i>
<i class="fa fa-home" style="font-size:75px; color:magenta;"></i>

</body>
</html>

Cara Menggunakan Font Awesome dengan css

Cara ini menggunakan metode penulisan pada css

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<style>
a {
 text-decoration : none;
}
.home:before {
 content : "\f015";
 font-family: FontAwesome;
 margin-right :10px;
}
.archive:before {
 content : "\f187";
 font-family: FontAwesome;
 margin-right :10px;
}
.facebook:before {
 content : "\f09a";
 font-family: FontAwesome;
 margin-right :10px;
}
.g-plus:before {
 content: "\f0d5";
 font-family: FontAwesome;
 margin-right :10px;
}
</style>

</head>
<body>

<ol id="demo">
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="archive">archive</a></li>
  <li><a href="#" class="facebook">My Facebook</a></li>
  <li><a href="#" class="g-plus">My G-Plus</a></li>
</ol>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<style>
a {
 text-decoration : none;
}
.home:before {
 content : "\f015";
 font-family: FontAwesome;
 margin-right :10px;
}
.archive:before {
 content : "\f187";
 font-family: FontAwesome;
 margin-right :10px;
}
.facebook:before {
 content : "\f09a";
 font-family: FontAwesome;
 margin-right :10px;
}
.g-plus:before {
 content: "\f0d5";
 font-family: FontAwesome;
 margin-right :10px;
}
</style>

</head>
<body>

<ol id="demo">
  <li><a href="#" class="home">Home</a></li>
  <li><a href="#" class="archive">archive</a></li>
  <li><a href="#" class="facebook">My Facebook</a></li>
  <li><a href="#" class="g-plus">My G-Plus</a></li>
</ol>

</body>
</html>

List Lengkap Font Awesome

Full List of Font Awesome with Live Preview

Berikut daftar atau list lengkap Font Awesome yang disertai dengan contoh lengkap dan Live Preview.
Click pada masing masing daftar untuk membuka editor.

Icon Font Awesome Terbaru

Berikut adalah daftar icon terbaru untuk version 4.7.0 :

address-book

address-book-o

address-card

address-card-o

bandcamp

bath

bathtub (alias)

drivers-license (alias)

drivers-license-o (alias)

eercast

envelope-open

envelope-open-o

etsy

free-code-camp

grav

handshake-o

id-badge

id-card

id-card-o

imdb

linode

meetup

microchip

podcast

quora

ravelry

s15 (alias)

shower

snowflake-o

superpowers

thermometer (alias)

thermometer-0 (alias)

thermometer-1 (alias)

thermometer-2 (alias)

thermometer-3 (alias)

thermometer-4 (alias)

thermometer-empty

thermometer-full

thermometer-half

thermometer-quarter

thermometer-three-quarters

times-rectangle (alias)

times-rectangle-o (alias)

user-circle

user-circle-o

user-o

vcard (alias)

vcard-o (alias)

window-close

window-close-o

window-maximize

window-minimize

window-restore

wpexplorer

Web Application Icons

address-book

address-book-o

address-card

address-card-o

adjust

american-sign-language-interpreting

anchor

Accessibility Icons

american-sign-language-interpreting

asl-interpreting (alias)

assistive-listening-systems

audio-description

blind

braille

deaf

deafness (alias)

hard-of-hearing (alias)

low-vision

question-circle-o

sign-language

signing (alias)

tty

universal-access

volume-control-phone

wheelchair

wheelchair-alt

Hand Icons

hand-grab-o (alias)

hand-lizard-o

hand-o-down

hand-o-left

hand-o-right

hand-o-up

hand-paper-o

hand-peace-o

hand-pointer-o

hand-rock-o

hand-scissors-o

hand-spock-o

hand-stop-o (alias)

thumbs-down

thumbs-o-down

thumbs-o-up

thumbs-up

Transportation Icons

ambulance

automobile (alias)

bicycle

bus

cab (alias)

car

fighter-jet

motorcycle

plane

rocket

ship

space-shuttle

subway

taxi

train

truck

wheelchair

wheelchair-alt

Gender Icons

genderless

intersex (alias)

mars

mars-double

mars-stroke

mars-stroke-h

mars-stroke-v

mercury

neuter

transgender

transgender-alt

venus

venus-double

venus-mars

File Type Icons

file

file-archive-o

file-audio-o

file-code-o

file-excel-o

file-image-o

file-movie-o (alias)

file-o

file-pdf-o

file-photo-o (alias)

file-picture-o (alias)

file-powerpoint-o

file-sound-o (alias)

file-text

file-text-o

file-video-o

file-word-o

file-zip-o (alias)

Spinner Icons

circle-o-notch

cog

gear (alias)

refresh

spinner

Form Control Icons

check-square

check-square-o

circle

circle-o

dot-circle-o

minus-square

minus-square-o

plus-square

plus-square-o

square

square-o

Payment Icons

cc-amex

cc-diners-club

cc-discover

cc-jcb

cc-mastercard

cc-paypal

cc-stripe

cc-visa

credit-card

credit-card-alt

google-wallet

paypal

Chart Icons

area-chart

bar-chart

bar-chart-o (alias)

line-chart

pie-chart

Currency Icons

bitcoin (alias)

btc

cny (alias)

dollar (alias)

eur

euro (alias)

gbp

gg-circle

ils

inr

jpy

krw

money

rmb (alias)

rouble (alias)

rub

ruble (alias)

rupee (alias)

shekel (alias)

sheqel (alias)

try

turkish-lira (alias)

usd

won (alias)

yen (alias)

Text Editor Icons

align-center

align-justify

align-left

align-right

bold

chain (alias)

chain-broken

clipboard

columns

copy (alias)

cut (alias)

dedent (alias)

eraser

file

file-o

file-text

file-text-o

files-o

floppy-o

font

header

indent

italic

link

list

list-alt

list-ol

list-ul

outdent

paperclip

paragraph

paste (alias)

repeat

rotate-left (alias)

rotate-right (alias)

save (alias)

scissors

strikethrough

subscript

superscript

table

text-height

text-width

th-large

th-list

underline

undo

unlink (alias)

Directional Icons

angle-double-down

angle-double-left

angle-double-right

angle-double-up

angle-down

angle-left

angle-right

angle-up

arrow-circle-down

arrow-circle-left

arrow-circle-o-down

arrow-circle-o-left

arrow-circle-o-right

arrow-circle-o-up

arrow-circle-right

arrow-circle-up

arrow-down

arrow-left

arrow-right

arrow-up

arrows

arrows-alt

arrows-h

arrows-v

caret-down

caret-left

caret-right

caret-square-o-down

caret-square-o-left

caret-square-o-right

caret-square-o-up

caret-up

chevron-circle-down

chevron-circle-left

chevron-circle-right

chevron-circle-up

chevron-down

chevron-left

chevron-right

chevron-up

exchange

hand-o-down

hand-o-left

hand-o-right

hand-o-up

long-arrow-down

long-arrow-left

long-arrow-right

long-arrow-up

toggle-down (alias)

toggle-left (alias)

toggle-right (alias)

toggle-up (alias)

Video Player Icons

arrows-alt

backward

compress

eject

expand

fast-backward

fast-forward

forward

pause

pause-circle

pause-circle-o

play

play-circle

play-circle-o

random

step-backward

step-forward

stop

stop-circle

stop-circle-o

youtube-play

Brand Icons

500px

adn

amazon

android

angellist

apple

bandcamp

behance

behance-square

bitbucket

bitbucket-square

bitcoin (alias)

black-tie

bluetooth

bluetooth-b

btc

buysellads

cc-amex

cc-diners-club

cc-discover

cc-jcb

cc-mastercard

cc-paypal

cc-stripe

cc-visa

chrome

codepen

codiepie

connectdevelop

contao

css3

dashcube

delicious

deviantart

digg

dribbble

dropbox

drupal

edge

eercast

empire

envira

etsy

expeditedssl

fa (alias)

facebook

facebook-f (alias)

facebook-official

facebook-square

firefox

first-order

flickr

font-awesome

fonticons

fort-awesome

forumbee

foursquare

free-code-camp

ge (alias)

get-pocket

gg-circle

git

git-square

github

github-alt

github-square

gitlab

gittip (alias)

glide

glide-g

google

google-plus

google-plus-circle (alias)

google-plus-official

google-plus-square

google-wallet

gratipay

grav

hacker-news

houzz

html5

imdb

instagram

internet-explorer

ioxhost

joomla

jsfiddle

lastfm

lastfm-square

leanpub

linkedin-square

linode

linux

maxcdn

meanpath

medium

meetup

mixcloud

modx

odnoklassniki

odnoklassniki-square

opencart

openid

opera

optin-monster

pagelines

paypal

pied-piper

pied-piper-alt

pied-piper-pp

pinterest-p

pinterest-square

product-hunt

quora

ra (alias)

ravelry

rebel

reddit-alien

reddit-square

renren

resistance (alias)

safari

scribd

sellsy

share-alt

share-alt-square

shirtsinbulk

simplybuilt

skyatlas

skype

slack

slideshare

snapchat

snapchat-ghost

snapchat-square

soundcloud

spotify

stack-exchange

stack-overflow

steam

steam-square

stumbleupon

stumbleupon-circle

superpowers

tencent-weibo

themeisle

trello

tripadvisor

tumblr

tumblr-square

twitch

twitter

twitter-square

usb

viacoin

viadeo

viadeo-square

vimeo

vimeo-square

vine

wechat (alias)

weibo

weixin

wikipedia-w

windows

wordpress

wpbeginner

wpexplorer

wpforms

xing

xing-square

y-combinator

y-combinator-square (alias)

yahoo

yc (alias)

yc-square (alias)

yelp

yoast

youtube

youtube-play

youtube-square

Medical Icons

ambulance

h-square

heart

heart-o

heartbeat

hospital-o

medkit

plus-square

stethoscope

user-md

wheelchair

wheelchair-alt

Judul	`Cara Pasang Font Awesome dan List Lengkap Font Awesome`
Label	`Font Icon,Tutorial`
Diposting pada	`16 Mei 2016 - 00:01`
Diperbaharui pada	`24 Juli 2019 - 03:55`

Cara Pasang Font Awesome dan List Lengkap Font Awesome

Apa itu Font Awesome

Cara Memasang Font Awesome

Keuntungan menggunakan `cdn` dan `css` eksternal untuk Font Awesome.

Keuntungan Menggunakan Font Awesome

Kekurangan Font Awesome

Cara Menggunakan Font Awesome

Cara Menggunakan Font Awesome dengan css

List Lengkap Font Awesome

Icon Font Awesome Terbaru

Web Application Icons

Accessibility Icons

Hand Icons

Transportation Icons

Gender Icons

File Type Icons

Spinner Icons

Form Control Icons

Payment Icons

Chart Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

Medical Icons

Post Info

Populer Post

Arsip Blog

Label

Cara Pasang Font Awesome dan List Lengkap Font Awesome

Apa itu Font Awesome

Cara Memasang Font Awesome

Keuntungan menggunakan cdn dan css eksternal untuk Font Awesome.

Keuntungan Menggunakan Font Awesome

Kekurangan Font Awesome

Cara Menggunakan Font Awesome

Cara Menggunakan Font Awesome dengan css

List Lengkap Font Awesome

Icon Font Awesome Terbaru

Web Application Icons

Accessibility Icons

Hand Icons

Transportation Icons

Gender Icons

File Type Icons

Spinner Icons

Form Control Icons

Payment Icons

Chart Icons

Currency Icons

Text Editor Icons

Directional Icons

Video Player Icons

Brand Icons

Medical Icons

Post Info

Populer Post

Arsip Blog

Label

Keuntungan menggunakan `cdn` dan `css` eksternal untuk Font Awesome.