LIST ICON FONT AWESOME v4.7.0

Postingan terkait:

FontAwesome v5.1.1

FontAwesome v4.7.0

Pesudo Element Font Awesome 4.7.0

:before & :after

Link header untuk Font Awesome 4.7.0 :

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

Menyisipkan content dihalaman melalui CSS.

Contoh elemen HTML :
< div > < span > < h1 > < p > dsb.
Copy paste CSS berikut ini untuk menerapkannya dan jangan lupa ubah suaikan jika dibutuhkan :

<style>

/*-- Ganti kode yang ditandai dengan Content Value yang terdapat pada table dibawah.--*/
.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
kode untuk mengatur icon jika diperlukan--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

</style>

Content Value - Font Awesome Icons 4.7.0

fa-glass"\f000" fa-music"\f001" fa-search"\f002" fa-envelope-o"\f003" fa-heart"\f004" fa-star"\f005" fa-star-o"\f006" fa-user"\f007" fa-film"\f008" fa-th-large"\f009" fa-th"\f00a" fa-th-list"\f00b" fa-check"\f00c" fa-times"\f00d" fa-search-plus"\f00e" fa-search-minus"\f010" fa-power-off"\f011" fa-signal"\f012" fa-cog"\f013" fa-trash-o"\f014" fa-home"\f015" fa-file-o"\f016" fa-clock-o"\f017" fa-road"\f018" fa-download"\f019" fa-arrow-circle-o-down"\f01a" fa-arrow-circle-o-up"\f01b" fa-inbox"\f01c" fa-play-circle-o"\f01d" fa-repeat"\f01e" fa-refresh"\f021" fa-list-alt"\f022" fa-lock"\f023" fa-flag"\f024" fa-headphones"\f025" fa-volume-off"\f026" fa-volume-down"\f027" fa-volume-up"\f028" fa-qrcode"\f029" fa-barcode"\f02a" fa-tag"\f02b" fa-tags"\f02c" fa-book"\f02d" fa-bookmark"\f02e" fa-print"\f02f" fa-camera"\f030" fa-font"\f031" fa-bold"\f032" fa-italic"\f033" fa-text-height"\f034" fa-text-width"\f035" fa-align-left"\f036" fa-align-center"\f037" fa-align-right"\f038" fa-align-justify"\f039" fa-list"\f03a" fa-outdent"\f03b" fa-indent"\f03c" fa-video-camera"\f03d" fa-picture-o"\f03e" fa-pencil"\f040" fa-map-marker"\f041" fa-adjust"\f042" fa-tint"\f043" fa-pencil-square-o"\f044" fa-share-square-o"\f045" fa-check-square-o"\f046" fa-arrows"\f047" fa-step-backward"\f048" fa-fast-backward"\f049" fa-backward"\f04a" fa-play"\f04b" fa-pause"\f04c" fa-stop"\f04d" fa-forward"\f04e" fa-fast-forward"\f050" fa-step-forward"\f051" fa-eject"\f052" fa-chevron-left"\f053" fa-chevron-right"\f054" fa-plus-circle"\f055" fa-minus-circle"\f056" fa-times-circle"\f057" fa-check-circle"\f058" fa-question-circle"\f059" fa-info-circle"\f05a" fa-crosshairs"\f05b" fa-times-circle-o"\f05c" fa-check-circle-o"\f05d" fa-ban"\f05e" fa-arrow-left"\f060" fa-arrow-right"\f061" fa-arrow-up"\f062" fa-arrow-down"\f063" fa-share"\f064" fa-expand"\f065" fa-compress"\f066" fa-plus"\f067" fa-minus"\f068" fa-asterisk"\f069" fa-exclamation-circle"\f06a" fa-gift"\f06b" fa-leaf"\f06c" fa-fire"\f06d" fa-eye"\f06e" fa-eye-slash"\f070" fa-exclamation-triangle"\f071" fa-plane"\f072" fa-calendar"\f073" fa-random"\f074" fa-comment"\f075" fa-magnet"\f076" fa-chevron-up"\f077" fa-chevron-down"\f078" fa-retweet"\f079" fa-shopping-cart"\f07a" fa-folder"\f07b" fa-folder-open"\f07c" fa-arrows-v"\f07d" fa-arrows-h"\f07e" fa-bar-chart"\f080" fa-twitter-square"\f081" fa-facebook-square"\f082" fa-camera-retro"\f083" fa-key"\f084" fa-cogs"\f085" fa-comments"\f086" fa-thumbs-o-up"\f087" fa-thumbs-o-down"\f088" fa-star-half"\f089" fa-heart-o"\f08a" fa-sign-out"\f08b" fa-linkedin-square"\f08c" fa-thumb-tack"\f08d" fa-external-link"\f08e" fa-sign-in"\f090" fa-trophy"\f091" fa-github-square"\f092" fa-upload"\f093" fa-lemon-o"\f094" fa-hdd-o"\f0a0" fa-bullhorn"\f0a1" fa-bell"\f0f3" fa-certificate"\f0a3" fa-hand-o-right"\f0a4" fa-hand-o-left"\f0a5" fa-hand-o-up"\f0a6" fa-hand-o-down"\f0a7" fa-arrow-circle-left"\f0a8" fa-arrow-circle-right"\f0a9" fa-arrow-circle-up"\f0aa" fa-arrow-circle-down"\f0ab" fa-globe"\f0ac" fa-wrench"\f0ad" fa-tasks"\f0ae" fa-filter"\f0b0" fa-briefcase"\f0b1" fa-arrows-alt"\f0b2" fa-users"\f0c0" fa-link"\f0c1" fa-cloud"\f0c2" fa-flask"\f0c3" fa-scissors"\f0c4" fa-files-o"\f0c5" fa-paperclip"\f0c6" fa-floppy-o"\f0c7" fa-square"\f0c8" fa-bars"\f0c9" fa-list-ul"\f0ca" fa-list-ol"\f0cb" fa-strikethrough"\f0cc" fa-underline"\f0cd" fa-table"\f0ce" fa-magic"\f0d0" fa-truck"\f0d1" fa-pinterest"\f0d2" fa-pinterest-square"\f0d3" fa-google-plus-square"\f0d4" fa-google-plus"\f0d5" fa-money"\f0d6" fa-caret-down"\f0d7" fa-caret-up"\f0d8" fa-caret-left"\f0d9" fa-caret-right"\f0da" fa-columns"\f0db" fa-sort"\f0dc" fa-sort-desc"\f0dd" fa-sort-asc"\f0de" fa-envelope"\f0e0" fa-linkedin"\f0e1" fa-undo"\f0e2" fa-gavel"\f0e3" fa-tachometer"\f0e4" fa-comment-o"\f0e5" fa-comments-o"\f0e6" fa-bolt"\f0e7" fa-sitemap"\f0e8" fa-umbrella"\f0e9" fa-clipboard"\f0ea" fa-lightbulb-o"\f0eb" fa-exchange"\f0ec" fa-cloud-download"\f0ed" fa-cloud-upload"\f0ee" fa-user-md"\f0f0" fa-stethoscope"\f0f1" fa-suitcase"\f0f2" fa-bell-o"\f0a2" fa-coffee"\f0f4" fa-cutlery"\f0f5" fa-file-text-o"\f0f6" fa-building-o"\f0f7" fa-hospital-o"\f0f8" fa-ambulance"\f0f9" fa-medkit"\f0fa" fa-fighter-jet"\f0fb" fa-beer"\f0fc" fa-h-square"\f0fd" fa-plus-square"\f0fe" fa-angle-double-left"\f100" fa-angle-double-right"\f101" fa-angle-double-up"\f102" fa-angle-double-down"\f103" fa-angle-left"\f104" fa-angle-right"\f105" fa-angle-up"\f106" fa-angle-down"\f107" fa-desktop"\f108" fa-laptop"\f109" fa-tablet"\f10a" fa-mobile"\f10b" fa-circle-o"\f10c" fa-quote-left"\f10d" fa-quote-right"\f10e" fa-spinner"\f110" fa-circle"\f111" fa-reply"\f112" fa-github-alt"\f113" fa-folder-o"\f114" fa-folder-open-o"\f115" fa-smile-o"\f118" fa-frown-o"\f119" fa-meh-o"\f11a" fa-gamepad"\f11b" fa-keyboard-o"\f11c" fa-flag-o"\f11d" fa-flag-checkered"\f11e" fa-terminal"\f120" fa-code"\f121" fa-reply-all"\f122" fa-star-half-o"\f123" fa-location-arrow"\f124" fa-crop"\f125" fa-code-fork"\f126" fa-chain-broken"\f127" fa-question"\f128" fa-info"\f129" fa-exclamation"\f12a" fa-superscript"\f12b" fa-subscript"\f12c" fa-eraser"\f12d" fa-puzzle-piece"\f12e" fa-microphone"\f130" fa-microphone-slash"\f131" fa-shield"\f132" fa-calendar-o"\f133" fa-fire-extinguisher"\f134" fa-rocket"\f135" fa-maxcdn"\f136" fa-chevron-circle-left"\f137" fa-chevron-circle-right"\f138" fa-chevron-circle-up"\f139" fa-chevron-circle-down"\f13a" fa-html5"\f13b" fa-css3"\f13c" fa-anchor"\f13d" fa-unlock-alt"\f13e" fa-bullseye"\f140" fa-ellipsis-h"\f141" fa-ellipsis-v"\f142" fa-rss-square"\f143" fa-play-circle"\f144" fa-ticket"\f145" fa-minus-square"\f146" fa-minus-square-o"\f147" fa-level-up"\f148" fa-level-down"\f149" fa-check-square"\f14a" fa-pencil-square"\f14b" fa-external-link-square"\f14c" fa-share-square"\f14d" fa-compass"\f14e" fa-caret-square-o-down"\f150" fa-caret-square-o-up"\f151" fa-caret-square-o-right"\f152" fa-eur"\f153" fa-gbp"\f154" fa-usd"\f155" fa-inr"\f156" fa-jpy"\f157" fa-rub"\f158" fa-krw"\f159" fa-btc"\f15a" fa-file"\f15b" fa-file-text"\f15c" fa-sort-alpha-asc"\f15d" fa-sort-alpha-desc"\f15e" fa-sort-amount-asc"\f160" fa-sort-amount-desc"\f161" fa-sort-numeric-asc"\f162" fa-sort-numeric-desc"\f163" fa-thumbs-up"\f164" fa-thumbs-down"\f165" fa-youtube-square"\f166" fa-youtube"\f167" fa-xing"\f168" fa-xing-square"\f169" fa-youtube-play"\f16a" fa-dropbox"\f16b" fa-stack-overflow"\f16c" fa-instagram"\f16d" fa-flickr"\f16e" fa-adn"\f170" fa-bitbucket"\f171" fa-bitbucket-square"\f172" fa-tumblr"\f173" fa-tumblr-square"\f174" fa-long-arrow-down"\f175" fa-long-arrow-up"\f176" fa-long-arrow-left"\f177" fa-long-arrow-right"\f178" fa-apple"\f179" fa-windows"\f17a" fa-android"\f17b" fa-linux"\f17c" fa-dribbble"\f17d" fa-skype"\f17e" fa-foursquare"\f180" fa-trello"\f181" fa-female"\f182" fa-male"\f183" fa-gratipay"\f184" fa-sun-o"\f185" fa-moon-o"\f186" fa-archive"\f187" fa-bug"\f188" fa-vk"\f189" fa-weibo"\f18a" fa-renren"\f18b" fa-pagelines"\f18c" fa-stack-exchange"\f18d" fa-arrow-circle-o-right"\f18e" fa-arrow-circle-o-left"\f190" fa-caret-square-o-left"\f191" fa-dot-circle-o"\f192" fa-wheelchair"\f193" fa-vimeo-square"\f194" fa-try"\f195" fa-plus-square-o"\f196" fa-space-shuttle"\f197" fa-slack"\f198" fa-envelope-square"\f199" fa-wordpress"\f19a" fa-openid"\f19b" fa-university"\f19c" fa-graduation-cap"\f19d" fa-yahoo"\f19e" fa-google"\f1a0" fa-reddit"\f1a1" fa-reddit-square"\f1a2" fa-stumbleupon-circle"\f1a3" fa-stumbleupon"\f1a4" fa-delicious"\f1a5" fa-digg"\f1a6" fa-pied-piper"\f1a7" fa-pied-piper-alt"\f1a8" fa-drupal"\f1a9" fa-joomla"\f1aa" fa-language"\f1ab" fa-fax"\f1ac" fa-building"\f1ad" fa-child"\f1ae" fa-paw"\f1b0" fa-spoon"\f1b1" fa-cube"\f1b2" fa-cubes"\f1b3" fa-behance"\f1b4" fa-behance-square"\f1b5" fa-steam"\f1b6" fa-steam-square"\f1b7" fa-recycle"\f1b8" fa-car"\f1b9" fa-taxi"\f1ba" fa-tree"\f1bb" fa-spotify"\f1bc" fa-deviantart"\f1bd" fa-soundcloud"\f1be" fa-database"\f1c0" fa-file-pdf-o"\f1c1" fa-file-word-o"\f1c2" fa-file-excel-o"\f1c3" fa-file-powerpoint-o"\f1c4" fa-file-image-o"\f1c5" fa-file-archive-o"\f1c6" fa-file-audio-o"\f1c7" fa-file-video-o"\f1c8" fa-file-code-o"\f1c9" fa-vine"\f1ca" fa-codepen"\f1cb" fa-jsfiddle"\f1cc" fa-life-ring"\f1cd" fa-circle-o-notch"\f1ce" fa-rebel"\f1d0" fa-empire"\f1d1" fa-git-square"\f1d2" fa-git"\f1d3" fa-hacker-news"\f1d4" fa-tencent-weibo"\f1d5" fa-qq"\f1d6" fa-weixin"\f1d7" fa-paper-plane"\f1d8" fa-paper-plane-o"\f1d9" fa-history"\f1da" fa-circle-thin"\f1db" fa-header"\f1dc" fa-paragraph"\f1dd" fa-sliders"\f1de" fa-share-alt"\f1e0" fa-share-alt-square"\f1e1" fa-bomb"\f1e2" fa-futbol-o"\f1e3" fa-tty"\f1e4" fa-binoculars"\f1e5" fa-plug"\f1e6" fa-slideshare"\f1e7" fa-twitch"\f1e8" fa-yelp"\f1e9" fa-newspaper-o"\f1ea" fa-wifi"\f1eb" fa-calculator"\f1ec" fa-paypal"\f1ed" fa-google-wallet"\f1ee" fa-cc-visa"\f1f0" fa-cc-mastercard"\f1f1" fa-cc-discover"\f1f2" fa-cc-amex"\f1f3" fa-cc-paypal"\f1f4" fa-cc-stripe"\f1f5" fa-bell-slash"\f1f6" fa-bell-slash-o"\f1f7" fa-trash"\f1f8" fa-copyright"\f1f9" fa-at"\f1fa" fa-eyedropper"\f1fb" fa-paint-brush"\f1fc" fa-birthday-cake"\f1fd" fa-area-chart"\f1fe" fa-pie-chart"\f200" fa-line-chart"\f201" fa-lastfm"\f202" fa-lastfm-square"\f203" fa-toggle-off"\f204" fa-toggle-on"\f205" fa-bicycle"\f206" fa-bus"\f207" fa-ioxhost"\f208" fa-angellist"\f209" fa-cc"\f20a" fa-ils"\f20b" fa-meanpath"\f20c" fa-buysellads"\f20d" fa-connectdevelop"\f20e" fa-dashcube"\f210" fa-forumbee"\f211" fa-leanpub"\f212" fa-sellsy"\f213" fa-shirtsinbulk"\f214" fa-simplybuilt"\f215" fa-skyatlas"\f216" fa-cart-plus"\f217" fa-cart-arrow-down"\f218" fa-diamond"\f219" fa-ship"\f21a" fa-user-secret"\f21b" fa-motorcycle"\f21c" fa-street-view"\f21d" fa-heartbeat"\f21e" fa-venus"\f221" fa-mars"\f222" fa-mercury"\f223" fa-transgender"\f224" fa-transgender-alt"\f225" fa-venus-double"\f226" fa-mars-double"\f227" fa-venus-mars"\f228" fa-mars-stroke"\f229" fa-mars-stroke-v"\f22a" fa-mars-stroke-h"\f22b" fa-neuter"\f22c" fa-genderless"\f22d" fa-facebook-official"\f230" fa-pinterest-p"\f231" fa-whatsapp"\f232" fa-server"\f233" fa-user-plus"\f234" fa-user-times"\f235" fa-bed"\f236" fa-viacoin"\f237" fa-train"\f238" fa-subway"\f239" fa-medium"\f23a" fa-y-combinator"\f23b" fa-optin-monster"\f23c" fa-opencart"\f23d" fa-expeditedssl"\f23e" fa-battery-full"\f240" fa-battery-three-quarters"\f241" fa-battery-half"\f242" fa-battery-quarter"\f243" fa-battery-empty"\f244" fa-mouse-pointer"\f245" fa-i-cursor"\f246" fa-object-group"\f247" fa-object-ungroup"\f248" fa-sticky-note"\f249" fa-sticky-note-o"\f24a" fa-cc-jcb"\f24b" fa-cc-diners-club"\f24c" fa-clone"\f24d" fa-balance-scale"\f24e" fa-hourglass-o"\f250" fa-hourglass-start"\f251" fa-hourglass-half"\f252" fa-hourglass-end"\f253" fa-hourglass"\f254" fa-hand-rock-o"\f255" fa-hand-paper-o"\f256" fa-hand-scissors-o"\f257" fa-hand-lizard-o"\f258" fa-hand-spock-o"\f259" fa-hand-pointer-o"\f25a" fa-hand-peace-o"\f25b" fa-trademark"\f25c" fa-registered"\f25d" fa-creative-commons"\f25e" fa-gg"\f260" fa-gg-circle"\f261" fa-tripadvisor"\f262" fa-odnoklassniki"\f263" fa-odnoklassniki-square"\f264" fa-get-pocket"\f265" fa-wikipedia-w"\f266" fa-safari"\f267" fa-chrome"\f268" fa-firefox"\f269" fa-opera"\f26a" fa-internet-explorer"\f26b" fa-television"\f26c" fa-contao"\f26d" fa-500px"\f26e" fa-amazon"\f270" fa-calendar-plus-o"\f271" fa-calendar-minus-o"\f272" fa-calendar-times-o"\f273" fa-calendar-check-o"\f274" fa-industry"\f275" fa-map-pin"\f276" fa-map-signs"\f277" fa-map-o"\f278" fa-map"\f279" fa-commenting"\f27a" fa-commenting-o"\f27b" fa-phone"\f095" fa-square-o"\f096" fa-bookmark-o"\f097" fa-phone-square"\f098" fa-twitter"\f099" fa-facebook"\f09a" fa-github"\f09b" fa-unlock"\f09c" fa-credit-card"\f09d" fa-rss"\f09e" fa-houzz"\f27c" fa-vimeo"\f27d" fa-black-tie"\f27e" fa-fonticons"\f280"