Font Awesome

Приветствую. Наверное вы уже знаете о таком замечательном инструменте как иконочный шрифт от Font Awesome для сайта.

Если нет, то вкратце расскажу, это набор масштабируемых векторных иконок, с помощью которых можно добавлять на сайт разнообразные иконки и при этом не использовать обычные картинки, но самое важное это то что с ними можно работать как с обычным текстом, то есть можно добавлять к иконке размер, цвет, тень, производить разнообразные форматирования текста и так далее.

Это очень удобно и не нужно в фотошопе постоянно нарезать какие то картинки, ну и плюс это очень стильно и красиво смотрится, я уже не говорю о том что картинки нагружают ваш сайт и он медленнее работает, в данном случае все намного проще.

Перед тем как пользоваться иконками Font Awesome на своем сайте вам нужно их будет подключить, способов есть несколько, к примеру скачать и загрузить на свой сайт или сделать прямое подключение из сервера CDNJS.

Я не буду сейчас описывать детально как подключить иконки Awesome на свой сайт с загрузкой всех файлов, так как статья чуточку о другом, как это сделать вы можете найти самостоятельно в интернете, а для того что бы подключить их из ресурса CDN JS вам достаточно на сайт где то над </head> добавить строку:

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

После добавления этой строки вы сможете полностью работать с иконочным шрифтом.

Ок, думаю что такое шрифт Font Awesome вы сможете узнать самостоятельно из поисковых систем, сегодня я же хочу добавить на страницу значения Font Awesome каждого из шрифтов именно для использования из css файла.

По умолчанию шрифт добавляется конкретно на страницу html используя тег <i> к примеру так:

<i class="fa fa-etsy" aria-hidden="true"></i>

Но иногда нам нужно добавлять его в файлы css, а так как просто вставить название шрифта в файл стилей не получится, он попросту работать не будет, нужно добавлять именно значение шрифта, и мы сегодня рассмотрим все значения шрифта Font Awesome для возможности добавления их в css.

Допустим вы хотите к какому то элементу на сайте впереди него добавить иконку Awesome, ниже наведу пример как это делается:

.element:before {
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

То есть мы добавили :before к нужному нам блоку и добавили шрифт иконок font-family: FontAwesome; со значением самой иконки content: "\f000"; ( ), вот и все в принципе, теперь иконка отобразится впереди указанного блока, все остальные css стили указанные здесь только для форматирования внешнего вида иконки.

И так ниже предоставляю для вас полный список иконок Awesome с указанием значений всех его шрифтов. Вы конечно же можете любое значение посмотреть и самостоятельно в своем подключенном файле font-awesome.min.css но я думаю что будет намного удобнее узнать значение шрифта воспользовавшись предоставленной на нашем сайте таблицей.

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-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-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-houzz"\f27c"

fa-vimeo"\f27d"

fa-black-tie"\f27e"

fa-fonticons"\f280"