Подключение и применение иконок Elusive Icons
Скачайте архив с иконками и используя описание, подключите иконки и применяйте используя служебные имена селекторов class="", по умолчанию в файле стилей шрифты иконок уже подключены к серверу нашего сайта.
Подключение стилей иконок
Закачайте файлы шрифтов на сервер своего сайта и укажите путь к ним в файле стилей elusive-webfont.css.
@font-face {
font-family: 'Elusive-Icons';
src:url('//atmpl.ru/design/free-icons/2014/elusive-icons/Elusive-Icons.eot');
src:url('//atmpl.ru/design/free-icons/2014/elusive-icons/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
url('//atmpl.ru/design/free-icons/2014/elusive-icons/Elusive-Icons.ttf') format('truetype'),
url('//atmpl.ru/design/free-icons/2014/elusive-icons/Elusive-Icons.woff') format('woff'),
url('//atmpl.ru/design/free-icons/2014/elusive-icons/Elusive-Icons.svg#Elusive-Icons') format('svg');
font-weight: normal;
font-style: normal;
}
Подключение файла иконок
После того как Вы изменили путь к шрифтам иконок, закачайте файл стилей elusive-webfont.css на свой сервер и подключите в зоне <head> на страницах, где будут использоваться иконки.
<link href="//atmpl.ru/design/free-icons/2014/elusive-icons/elusive-webfont.css" rel="stylesheet" />
Применение иконок Elusive Icons
Применять иконки рекомендуется используя теги <i> и <span>, но можно и к другим тоже.
<link href="//atmpl.ru/design/free-icons/2014/elusive-icons/elusive-webfont.css" rel="stylesheet" /> <div style="text-align:center;font-size:4rem;color:green;"> <i class="el-icon-lines"></i> <i class="el-icon-lines"></i> <span class="el-icon-lines"></span> <span class="el-icon-lines"></span> </div>
299 бесплатных иконок Elusive Icons
el-icon-zoom-out
el-icon-zoom-in
el-icon-youtube
el-icon-wrench-alt
el-icon-wrench
el-icon-wordpress
el-icon-wheelchair
el-icon-website-alt
el-icon-website
el-icon-warning-sign
el-icon-w3c
el-icon-volume-up
el-icon-volume-off
el-icon-volume-down
el-icon-vkontakte
el-icon-vimeo
el-icon-view-mode
el-icon-video-chat
el-icon-video-alt
el-icon-video
el-icon-viadeo
el-icon-user
el-icon-usd
el-icon-upload
el-icon-unlock-alt
el-icon-unlock
el-icon-universal-access
el-icon-twitter
el-icon-tumblr
el-icon-trash-alt
el-icon-trash
el-icon-torso
el-icon-tint
el-icon-time-alt
el-icon-time
el-icon-thumbs-up
el-icon-thumbs-down
el-icon-th-list
el-icon-th-large
el-icon-th
el-icon-text-width
el-icon-text-height
el-icon-tasks
el-icon-tags
el-icon-tag
el-icon-stumbleupon
el-icon-stop-alt
el-icon-stop
el-icon-step-forward
el-icon-step-backward
el-icon-star-empty
el-icon-star-alt
el-icon-star
el-icon-stackoverflow
el-icon-spotify
el-icon-speaker
el-icon-soundcloud
el-icon-smiley-alt
el-icon-smiley
el-icon-slideshare
el-icon-skype
el-icon-signal
el-icon-shopping-cart-sign
el-icon-shopping-cart
el-icon-share-alt
el-icon-share
el-icon-search-alt
el-icon-search
el-icon-screenshot
el-icon-screen-alt
el-icon-screen
el-icon-scissors
el-icon-rss
el-icon-road
el-icon-reverse-alt
el-icon-retweet
el-icon-return-key
el-icon-resize-vertical
el-icon-resize-small
el-icon-resize-horizontal
el-icon-resize-full
el-icon-repeat-alt
el-icon-repeat
el-icon-remove-sign
el-icon-remove-circle
el-icon-remove
el-icon-refresh
el-icon-reddit
el-icon-record
el-icon-random
el-icon-quotes-alt
el-icon-quotes
el-icon-question-sign
el-icon-question
el-icon-qrcode
el-icon-puzzle
el-icon-print
el-icon-podcast
el-icon-plus-sign
el-icon-plus
el-icon-play-circle
el-icon-play-alt
el-icon-play
el-icon-plane
el-icon-pinterest
el-icon-picture
el-icon-picasa
el-icon-photo-alt
el-icon-photo
el-icon-phone-alt
el-icon-phone
el-icon-person
el-icon-pencil-alt
el-icon-pencil
el-icon-pause-alt
el-icon-pause
el-icon-path
el-icon-paper-clip-alt
el-icon-paper-clip
el-icon-opensource
el-icon-ok-sign
el-icon-ok-circle
el-icon-ok
el-icon-off
el-icon-network
el-icon-myspace
el-icon-music
el-icon-move
el-icon-minus-sign
el-icon-minus
el-icon-mic-alt
el-icon-mic
el-icon-map-marker-alt
el-icon-map-marker
el-icon-male
el-icon-magnet
el-icon-magic
el-icon-lock-alt
el-icon-lock
el-icon-livejournal
el-icon-list-alt
el-icon-list
el-icon-linkedin
el-icon-link
el-icon-lines
el-icon-leaf
el-icon-lastfm
el-icon-laptop-alt
el-icon-laptop
el-icon-key
el-icon-italic
el-icon-iphone-home
el-icon-instagram
el-icon-info-sign
el-icon-indent-right
el-icon-indent-left
el-icon-inbox-box
el-icon-inbox-alt
el-icon-inbox
el-icon-idea-alt
el-icon-idea
el-icon-hourglass
el-icon-home-alt
el-icon-home
el-icon-heart-empty
el-icon-heart-alt
el-icon-heart
el-icon-hearing-impaired
el-icon-headphones
el-icon-hdd
el-icon-hand-up
el-icon-hand-right
el-icon-hand-left
el-icon-hand-down
el-icon-guidedog
el-icon-group-alt
el-icon-group
el-icon-graph-alt
el-icon-graph
el-icon-googleplus
el-icon-globe-alt
el-icon-globe
el-icon-glasses
el-icon-glass
el-icon-github-text
el-icon-github
el-icon-gift
el-icon-gbp
el-icon-fullscreen
el-icon-friendfeed-rect
el-icon-friendfeed
el-icon-foursquare
el-icon-forward-alt
el-icon-forward
el-icon-fork
el-icon-fontsize
el-icon-font
el-icon-folder-sign
el-icon-folder-open
el-icon-folder-close
el-icon-folder
el-icon-flickr
el-icon-flag-alt
el-icon-flag
el-icon-fire
el-icon-filter
el-icon-film
el-icon-file-new-alt
el-icon-file-new
el-icon-file-edit-alt
el-icon-file-edit
el-icon-file-alt
el-icon-file
el-icon-female
el-icon-fast-forward
el-icon-fast-backward
el-icon-facetime-video
el-icon-facebook
el-icon-eye-open
el-icon-eye-close
el-icon-exclamation-sign
el-icon-eur
el-icon-error-alt
el-icon-error
el-icon-envelope-alt
el-icon-envelope
el-icon-eject
el-icon-edit
el-icon-dribbble
el-icon-download-alt
el-icon-download
el-icon-digg
el-icon-deviantart
el-icon-delicious
el-icon-dashboard
el-icon-css
el-icon-credit-card
el-icon-compass-alt
el-icon-compass
el-icon-comment-alt
el-icon-comment
el-icon-cogs
el-icon-cog-alt
el-icon-cog
el-icon-cloud-alt
el-icon-cloud
el-icon-circle-arrow-up
el-icon-circle-arrow-right
el-icon-circle-arrow-left
el-icon-circle-arrow-down
el-icon-child
el-icon-chevron-up
el-icon-chevron-right
el-icon-chevron-left
el-icon-chevron-down
el-icon-check-empty
el-icon-check
el-icon-certificate
el-icon-cc
el-icon-caret-up
el-icon-caret-right
el-icon-caret-left
el-icon-caret-down
el-icon-car
el-icon-camera
el-icon-calendar-sign
el-icon-calendar
el-icon-bullhorn
el-icon-bulb
el-icon-brush
el-icon-broom
el-icon-briefcase
el-icon-braille
el-icon-bookmark-empty
el-icon-bookmark
el-icon-book
el-icon-bold
el-icon-blogger
el-icon-blind
el-icon-bell
el-icon-behance
el-icon-barcode
el-icon-ban-circle
el-icon-backward
el-icon-asl
el-icon-arrow-up
el-icon-arrow-right
el-icon-arrow-left
el-icon-arrow-down
el-icon-align-right
el-icon-align-left
el-icon-align-justify
el-icon-align-center
el-icon-adult
el-icon-adjust-alt
el-icon-adjust
el-icon-address-book-alt
el-icon-address-book
el-icon-asterisk
Тест иконок Elusive Icons
Протестируйте иконки нажав на значёк выполнения кода, при желании Вы можете внести свои изменения в код.