Использование FontAwesome 4.7.0
Что такое FontAwesome?
Font Awesome — это масштабируемые векторные иконки, то-есть современная альтернатива устаревшим иконкам png, которые вы с легкостью можете персонализировать — размер иконки, цвет, тени и все, что можно сделать силами CSS и что самое важное — все эти кастомизации происходят без потери качества!.
Как подключить:
Загрузите на ваш сервер файлы из скачанного архива (папка fonts, файл .css.), затем
В < head > вашего html укажите ссылку на ваш font-awesome.min.css.
1 |
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"> |
Готово, теперь немного инструкций…
Использование FontAwesome 4.7.0 в HTML
Использовать можно следующим образом:
1 |
<i class="fa fa-glass"></i> |
Где
1 |
fa-glass |
Это имя самой иконки из списка ниже.
На выходе получаем это:
Готово.
Использование FontAwesome 4.7.0 в CSS
Следующим кодом иконки можно использовать в в текстовых полях input или же кнопках button
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.element { position: relative; } .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; } |
Где
1 |
content: "\f000"; |
Указан номер элемента (\f000) из следующего списка.
- 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»