ProfiPHPProfiPHP
Категория: Прочее

Font-Awesome - бесплатный и свободный шрифт со значками

Век живи — век учись. Можно всю жизнь заниматься любимым делом, но все равно до конца его не изучить. Точно такая же ситуация случилась со мной. Занимаюсь разработкой веб-сайтов достаточно долго и только недавно узнал об отличной реализации значков на сайте. Дело пойдет о Font Awesome - бесплатном и свободным шрифтом со значками.

Сразу напишу самое главное преимущество! Шрифт Font Awesome содержит значки в векторной форме, что позволяет принимать любой размер и любой цвет. А это очень важно, поскольку сейчас обязательно необходимо наличие адаптивной версии сайта, что приводит к автоматическому увеличению пиктограмм.

Приведу стандартный пример с использованием простых пикторгам и шрифта Font Awesome для разных масштабов:

Как видно из примера, разница просто невероятная. При увеличении масштаба изображение не теряет своего качества.

Для установки вы можете использовать Font Awesome CDN - самый простой способ получить шрифт Awesome на вашем веб-сайте, причем всего лишь с одной строкой кода. Для этого достаточно ввести имя почтового ящика на странице http://fontawesome.io/get-started/, на который придет ссылка на JS файл, например:
<script src="https://use.fontawesome.com/423f13dсd6.js"></script>
Для самостоятельного управления Font Awesome необходимо:

1. Скачать архив на странице: http://fontawesome.io/get-started/

2. Скопировать каталог в свой проект.

3. В <head> вашего html указать ссылку на ваш шрифт - awesome.min.css:
<link rel= "stylesheet" href= "css/font-awesome.min.css" > 
Теперь вы можете размещать значки Font Awesome практически где угодно используя префикс CSS "fa" и имя значка. Шрифт предназначен для использования с встроенными элементами, например "i" или "span".
<i class= "fa fa-heart" ></i> .fa-heart
Если вы измените размер шрифта контейнера значка, значок станет больше. То же самое касается цвета, тени и всех остальных характеристик, которые наследуются с помощью CSS.

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

Также опишу пример использования BB кодов с ярлыками изображениями и ярлыками пиктограмами шрифта Font Awesome:

Как видно - разница очень существенна. Может кому то пригодится, код реализации:
<style type="text/css">
#toolbar .fa{ font-size: 16px; padding: 5px; background: #fff; float: left; margin: 0 1px 0 0; min-width: 14px; text-align: center }
#toolbar .input_field { padding: 2px; position: relative; float: left }
#toolbar .input_field .fa-file-photo-o{ position: absolute; top: 0px; left:0px }
</style>
<div id="toolbar">
<i class="fa fa-bold"></i>
<i class="fa fa-italic"></i>
<i class="fa fa-underline"></i>
<i class="fa fa-file-code-o"></i>
<i class="fa fa-link"</i>
<i class="fa fa-youtube"></i>
<div class="input_field">
<span class="fa fa-file-photo-o"></span>
<input type="file" />
</div>
</div>
Список всех значков версии font-awesome-4.7.0:
.fa-glass
.fa-music
.fa-search
.fa-envelope-o
.fa-heart
.fa-star
.fa-star-o
.fa-user
.fa-film
.fa-th-large
.fa-th
.fa-th-list
.fa-check
.fa-remove
.fa-close
.fa-times
.fa-search-plus
.fa-search-minus
.fa-power-off
.fa-signal
.fa-gear
.fa-cog
.fa-trash-o
.fa-home
.fa-file-o
.fa-clock-o
.fa-road
.fa-download
.fa-arrow-circle-o-down
.fa-arrow-circle-o-up
.fa-inbox
.fa-play-circle-o
.fa-rotate-right
.fa-repeat
.fa-refresh
.fa-list-alt
.fa-lock
.fa-flag
.fa-headphones
.fa-volume-off
.fa-volume-down
.fa-volume-up
.fa-qrcode
.fa-barcode
.fa-tag
.fa-tags
.fa-book
.fa-bookmark
.fa-print
.fa-camera
.fa-font
.fa-bold
.fa-italic
.fa-text-height
.fa-text-width
.fa-align-left
.fa-align-center
.fa-align-right
.fa-align-justify
.fa-list
.fa-dedent
.fa-outdent
.fa-indent
.fa-video-camera
.fa-photo
.fa-image
.fa-picture-o
.fa-pencil
.fa-map-marker
.fa-adjust
.fa-tint
.fa-edit
.fa-pencil-square-o
.fa-share-square-o
.fa-check-square-o
.fa-arrows
.fa-step-backward
.fa-fast-backward
.fa-backward
.fa-play
.fa-pause
.fa-stop
.fa-forward
.fa-fast-forward
.fa-step-forward
.fa-eject
.fa-chevron-left
.fa-chevron-right
.fa-plus-circle
.fa-minus-circle
.fa-times-circle
.fa-check-circle
.fa-question-circle
.fa-info-circle
.fa-crosshairs
.fa-times-circle-o
.fa-check-circle-o
.fa-ban
.fa-arrow-left
.fa-arrow-right
.fa-arrow-up
.fa-arrow-down
.fa-mail-forward
.fa-share
.fa-expand
.fa-compress
.fa-plus
.fa-minus
.fa-asterisk
.fa-exclamation-circle
.fa-gift
.fa-leaf
.fa-fire
.fa-eye
.fa-eye-slash
.fa-warning
.fa-exclamation-triangle
.fa-plane
.fa-calendar
.fa-random
.fa-comment
.fa-magnet
.fa-chevron-up
.fa-chevron-down
.fa-retweet
.fa-shopping-cart
.fa-folder
.fa-folder-open
.fa-arrows-v
.fa-arrows-h
.fa-bar-chart-o
.fa-bar-chart
.fa-twitter-square
.fa-facebook-square
.fa-camera-retro
.fa-key
.fa-gears
.fa-cogs
.fa-comments
.fa-thumbs-o-up
.fa-thumbs-o-down
.fa-star-half
.fa-heart-o
.fa-sign-out
.fa-linkedin-square
.fa-thumb-tack
.fa-external-link
.fa-sign-in
.fa-trophy
.fa-github-square
.fa-upload
.fa-lemon-o
.fa-phone
.fa-square-o
.fa-bookmark-o
.fa-phone-square
.fa-twitter
.fa-facebook-f
.fa-facebook
.fa-github
.fa-unlock
.fa-credit-card
.fa-feed
.fa-rss
.fa-hdd-o
.fa-bullhorn
.fa-bell
.fa-certificate
.fa-hand-o-right
.fa-hand-o-left
.fa-hand-o-up
.fa-hand-o-down
.fa-arrow-circle-left
.fa-arrow-circle-right
.fa-arrow-circle-up
.fa-arrow-circle-down
.fa-globe
.fa-wrench
.fa-tasks
.fa-filter
.fa-briefcase
.fa-arrows-alt
.fa-group
.fa-users
.fa-chain
.fa-link
.fa-cloud
.fa-flask
.fa-cut
.fa-scissors
.fa-copy
.fa-files-o
.fa-paperclip
.fa-save
.fa-floppy-o
.fa-square
.fa-navicon
.fa-reorder
.fa-bars
.fa-list-ul
.fa-list-ol
.fa-strikethrough
.fa-underline
.fa-table
.fa-magic
.fa-truck
.fa-pinterest
.fa-pinterest-square
.fa-google-plus-square
.fa-google-plus
.fa-money
.fa-caret-down
.fa-caret-up
.fa-caret-left
.fa-caret-right
.fa-columns
.fa-unsorted
.fa-sort
.fa-sort-down
.fa-sort-desc
.fa-sort-up
.fa-sort-asc
.fa-envelope
.fa-linkedin
.fa-rotate-left
.fa-undo
.fa-legal
.fa-gavel
.fa-dashboard
.fa-tachometer
.fa-comment-o
.fa-comments-o
.fa-flash
.fa-bolt
.fa-sitemap
.fa-umbrella
.fa-paste
.fa-clipboard
.fa-lightbulb-o
.fa-exchange
.fa-cloud-download
.fa-cloud-upload
.fa-user-md
.fa-stethoscope
.fa-suitcase
.fa-bell-o
.fa-coffee
.fa-cutlery
.fa-file-text-o
.fa-building-o
.fa-hospital-o
.fa-ambulance
.fa-medkit
.fa-fighter-jet
.fa-beer
.fa-h-square
.fa-plus-square
.fa-angle-double-left
.fa-angle-double-right
.fa-angle-double-up
.fa-angle-double-down
.fa-angle-left
.fa-angle-right
.fa-angle-up
.fa-angle-down
.fa-desktop
.fa-laptop
.fa-tablet
.fa-mobile-phone
.fa-mobile
.fa-circle-o
.fa-quote-left
.fa-quote-right
.fa-spinner
.fa-circle
.fa-mail-reply
.fa-reply
.fa-github-alt
.fa-folder-o
.fa-folder-open-o
.fa-smile-o
.fa-frown-o
.fa-meh-o
.fa-gamepad
.fa-keyboard-o
.fa-flag-o
.fa-flag-checkered
.fa-terminal
.fa-code
.fa-mail-reply-all
.fa-reply-all
.fa-star-half-empty
.fa-star-half-full
.fa-star-half-o
.fa-location-arrow
.fa-crop
.fa-code-fork
.fa-unlink
.fa-chain-broken
.fa-question
.fa-info
.fa-exclamation
.fa-superscript
.fa-subscript
.fa-eraser
.fa-puzzle-piece
.fa-microphone
.fa-microphone-slash
.fa-shield
.fa-calendar-o
.fa-fire-extinguisher
.fa-rocket
.fa-maxcdn
.fa-chevron-circle-left
.fa-chevron-circle-right
.fa-chevron-circle-up
.fa-chevron-circle-down
.fa-html5
.fa-css3
.fa-anchor
.fa-unlock-alt
.fa-bullseye
.fa-ellipsis-h
.fa-ellipsis-v
.fa-rss-square
.fa-play-circle
.fa-ticket
.fa-minus-square
.fa-minus-square-o
.fa-level-up
.fa-level-down
.fa-check-square
.fa-pencil-square
.fa-external-link-square
.fa-share-square
.fa-compass
.fa-toggle-down
.fa-caret-square-o-down
.fa-toggle-up
.fa-caret-square-o-up
.fa-toggle-right
.fa-caret-square-o-right
.fa-euro
.fa-eur
.fa-gbp
.fa-dollar
.fa-usd
.fa-rupee
.fa-inr
.fa-cny
.fa-rmb
.fa-yen
.fa-jpy
.fa-ruble
.fa-rouble
.fa-rub
.fa-won
.fa-krw
.fa-bitcoin
.fa-btc
.fa-file
.fa-file-text
.fa-sort-alpha-asc
.fa-sort-alpha-desc
.fa-sort-amount-asc
.fa-sort-amount-desc
.fa-sort-numeric-asc
.fa-sort-numeric-desc
.fa-thumbs-up
.fa-thumbs-down
.fa-youtube-square
.fa-youtube
.fa-xing
.fa-xing-square
.fa-youtube-play
.fa-dropbox
.fa-stack-overflow
.fa-instagram
.fa-flickr
.fa-adn
.fa-bitbucket
.fa-bitbucket-square
.fa-tumblr
.fa-tumblr-square
.fa-long-arrow-down
.fa-long-arrow-up
.fa-long-arrow-left
.fa-long-arrow-right
.fa-apple
.fa-windows
.fa-android
.fa-linux
.fa-dribbble
.fa-skype
.fa-foursquare
.fa-trello
.fa-female
.fa-male
.fa-gittip
.fa-gratipay
.fa-sun-o
.fa-moon-o
.fa-archive
.fa-bug
.fa-vk
.fa-weibo
.fa-renren
.fa-pagelines
.fa-stack-exchange
.fa-arrow-circle-o-right
.fa-arrow-circle-o-left
.fa-toggle-left
.fa-caret-square-o-left
.fa-dot-circle-o
.fa-wheelchair
.fa-vimeo-square
.fa-turkish-lira
.fa-try
.fa-plus-square-o
.fa-space-shuttle
.fa-slack
.fa-envelope-square
.fa-wordpress
.fa-openid
.fa-institution
.fa-bank
.fa-university
.fa-mortar-board
.fa-graduation-cap
.fa-yahoo
.fa-google
.fa-reddit
.fa-reddit-square
.fa-stumbleupon-circle
.fa-stumbleupon
.fa-delicious
.fa-digg
.fa-pied-piper-pp
.fa-pied-piper-alt
.fa-drupal
.fa-joomla
.fa-language
.fa-fax
.fa-building
.fa-child
.fa-paw
.fa-spoon
.fa-cube
.fa-cubes
.fa-behance
.fa-behance-square
.fa-steam
.fa-steam-square
.fa-recycle
.fa-automobile
.fa-car
.fa-cab
.fa-taxi
.fa-tree
.fa-spotify
.fa-deviantart
.fa-soundcloud
.fa-database
.fa-file-pdf-o
.fa-file-word-o
.fa-file-excel-o
.fa-file-powerpoint-o
.fa-file-photo-o
.fa-file-picture-o
.fa-file-image-o
.fa-file-zip-o
.fa-file-archive-o
.fa-file-sound-o
.fa-file-audio-o
.fa-file-movie-o
.fa-file-video-o
.fa-file-code-o
.fa-vine
.fa-codepen
.fa-jsfiddle
.fa-life-bouy
.fa-life-buoy
.fa-life-saver
.fa-support
.fa-life-ring
.fa-circle-o-notch
.fa-ra
.fa-resistance
.fa-rebel
.fa-ge
.fa-empire
.fa-git-square
.fa-git
.fa-y-combinator-square
.fa-yc-square
.fa-hacker-news
.fa-tencent-weibo
.fa-qq
.fa-wechat
.fa-weixin
.fa-send
.fa-paper-plane
.fa-send-o
.fa-paper-plane-o
.fa-history
.fa-circle-thin
.fa-header
.fa-paragraph
.fa-sliders
.fa-share-alt
.fa-share-alt-square
.fa-bomb
.fa-soccer-ball-o
.fa-futbol-o
.fa-tty
.fa-binoculars
.fa-plug
.fa-slideshare
.fa-twitch
.fa-yelp
.fa-newspaper-o
.fa-wifi
.fa-calculator
.fa-paypal
.fa-google-wallet
.fa-cc-visa
.fa-cc-mastercard
.fa-cc-discover
.fa-cc-amex
.fa-cc-paypal
.fa-cc-stripe
.fa-bell-slash
.fa-bell-slash-o
.fa-trash
.fa-copyright
.fa-at
.fa-eyedropper
.fa-paint-brush
.fa-birthday-cake
.fa-area-chart
.fa-pie-chart
.fa-line-chart
.fa-lastfm
.fa-lastfm-square
.fa-toggle-off
.fa-toggle-on
.fa-bicycle
.fa-bus
.fa-ioxhost
.fa-angellist
.fa-cc
.fa-shekel
.fa-sheqel
.fa-ils
.fa-meanpath
.fa-buysellads
.fa-connectdevelop
.fa-dashcube
.fa-forumbee
.fa-leanpub
.fa-sellsy
.fa-shirtsinbulk
.fa-simplybuilt
.fa-skyatlas
.fa-cart-plus
.fa-cart-arrow-down
.fa-diamond
.fa-ship
.fa-user-secret
.fa-motorcycle
.fa-street-view
.fa-heartbeat
.fa-venus
.fa-mars
.fa-mercury
.fa-intersex
.fa-transgender
.fa-transgender-alt
.fa-venus-double
.fa-mars-double
.fa-venus-mars
.fa-mars-stroke
.fa-mars-stroke-v
.fa-mars-stroke-h
.fa-neuter
.fa-genderless
.fa-facebook-official
.fa-pinterest-p
.fa-whatsapp
.fa-server
.fa-user-plus
.fa-user-times
.fa-hotel
.fa-bed
.fa-viacoin
.fa-train
.fa-subway
.fa-medium
.fa-yc
.fa-y-combinator
.fa-optin-monster
.fa-opencart
.fa-expeditedssl
.fa-battery-4
.fa-battery
.fa-battery-full
.fa-battery-3
.fa-battery-three-quarters
.fa-battery-2
.fa-battery-half
.fa-battery-1
.fa-battery-quarter
.fa-battery-0
.fa-battery-empty
.fa-mouse-pointer
.fa-i-cursor
.fa-object-group
.fa-object-ungroup
.fa-sticky-note
.fa-sticky-note-o
.fa-cc-jcb
.fa-cc-diners-club
.fa-clone
.fa-balance-scale
.fa-hourglass-o
.fa-hourglass-1
.fa-hourglass-start
.fa-hourglass-2
.fa-hourglass-half
.fa-hourglass-3
.fa-hourglass-end
.fa-hourglass
.fa-hand-grab-o
.fa-hand-rock-o
.fa-hand-stop-o
.fa-hand-paper-o
.fa-hand-scissors-o
.fa-hand-lizard-o
.fa-hand-spock-o
.fa-hand-pointer-o
.fa-hand-peace-o
.fa-trademark
.fa-registered
.fa-creative-commons
.fa-gg
.fa-gg-circle
.fa-tripadvisor
.fa-odnoklassniki
.fa-odnoklassniki-square
.fa-get-pocket
.fa-wikipedia-w
.fa-safari
.fa-chrome
.fa-firefox
.fa-opera
.fa-internet-explorer
.fa-tv
.fa-television
.fa-contao
.fa-500px
.fa-amazon
.fa-calendar-plus-o
.fa-calendar-minus-o
.fa-calendar-times-o
.fa-calendar-check-o
.fa-industry
.fa-map-pin
.fa-map-signs
.fa-map-o
.fa-map
.fa-commenting
.fa-commenting-o
.fa-houzz
.fa-vimeo
.fa-black-tie
.fa-fonticons
.fa-reddit-alien
.fa-edge
.fa-credit-card-alt
.fa-codiepie
.fa-modx
.fa-fort-awesome
.fa-usb
.fa-product-hunt
.fa-mixcloud
.fa-scribd
.fa-pause-circle
.fa-pause-circle-o
.fa-stop-circle
.fa-stop-circle-o
.fa-shopping-bag
.fa-shopping-basket
.fa-hashtag
.fa-bluetooth
.fa-bluetooth-b
.fa-percent
.fa-gitlab
.fa-wpbeginner
.fa-wpforms
.fa-envira
.fa-universal-access
.fa-wheelchair-alt
.fa-question-circle-o
.fa-blind
.fa-audio-description
.fa-volume-control-phone
.fa-braille
.fa-assistive-listening-systems
.fa-asl-interpreting
.fa-american-sign-language-interpreting
.fa-deafness
.fa-hard-of-hearing
.fa-deaf
.fa-glide
.fa-glide-g
.fa-signing
.fa-sign-language
.fa-low-vision
.fa-viadeo
.fa-viadeo-square
.fa-snapchat
.fa-snapchat-ghost
.fa-snapchat-square
.fa-pied-piper
.fa-first-order
.fa-yoast
.fa-themeisle
.fa-google-plus-circle
.fa-google-plus-official
.fa-fa
.fa-font-awesome
.fa-handshake-o
.fa-envelope-open
.fa-envelope-open-o
.fa-linode
.fa-address-book
.fa-address-book-o
.fa-vcard
.fa-address-card
.fa-vcard-o
.fa-address-card-o
.fa-user-circle
.fa-user-circle-o
.fa-user-o
.fa-id-badge
.fa-drivers-license
.fa-id-card
.fa-drivers-license-o
.fa-id-card-o
.fa-quora
.fa-free-code-camp
.fa-telegram
.fa-thermometer-4
.fa-thermometer
.fa-thermometer-full
.fa-thermometer-3
.fa-thermometer-three-quarters
.fa-thermometer-2
.fa-thermometer-half
.fa-thermometer-1
.fa-thermometer-quarter
.fa-thermometer-0
.fa-thermometer-empty
.fa-shower
.fa-bathtub
.fa-s15
.fa-bath
.fa-podcast
.fa-window-maximize
.fa-window-minimize
.fa-window-restore
.fa-times-rectangle
.fa-window-close
.fa-times-rectangle-o
.fa-window-close-o
.fa-bandcamp
.fa-grav
.fa-etsy
.fa-imdb
.fa-ravelry
.fa-eercast
.fa-microchip
.fa-snowflake-o
.fa-superpowers
.fa-wpexplorer
.fa-meetup

Добавить комментарий

Имя:
Текст комментария: