Вернуться на предыдущую страницу

CSS код и примеры использования этого шрифта-иконок «Open Iconic». Ниже Вы видите сам CSS код и таблицу с примерами классов, содержимого (content:"") и результат.

Узнайте также о CSS3 с примерами.

Шрифты-иконки Open Iconic

@font-face {
font-family: 'Icons';
src: url('../fonts/open-iconic.eot');
src: url('../fonts/open-iconic.eot?#iconic-sm') format('embedded-opentype'), url('../fonts/open-iconic.woff') format('woff'), url('../fonts/open-iconic.ttf') format('truetype'), url('../fonts/open-iconic.otf') format('opentype'), url('../fonts/open-iconic.svg#iconic-sm') format('svg');
font-weight: normal;
font-style: normal;
}

Например, Вы можете добавить такие классы на страницу или сайт, а потом их легко использовать в HTML конструкциях

.oi-cloud-download:before{content:'\e03c'}

Как использовать шрифты-иконки?

Например, Вы можете использовать импорт CSS кода. Скачайте и разместите у себя на сервере файлы шрифта. Затем подключите их в любой из подключенных к нужной странице CSS файл. Код подключения доступен выше. После этого, Вы сможете писать следующий код, например:

<div class="one"><i class="oi-cloud-download"></i> Скачать файл</div>

Получится:

 Скачать файл

Как видите, все очень просто. Именно поэтому мы создали данную страницу, чтобы Вы смогли увидеть сразу CSS код, html код и готовый результат, чтобы не использовать дополнительное ПО. Если Вы не хотите подгружать весь CSS код, то можете использовать лишь импорт шрифта и создавать свои классы.


Внимание! Если Вы решите использовать классы, а не data-glyph, то рекомендуем скачать архив (ссылка внизу). В нем Вы найдете oi.css. Используйте этот css файл, чтобы подключать эти шрифты. Обратите внимание, что файлы шрифтов необходимо разместить В ТОЙ ЖЕ директории, что и сам CSS файл или изменить путь к шрифтам вручную в файле oi.css (в архиве ниже). Например: Вы скинули к себе на сервер файл oi.css в папку /styles/ ... Теперь туда же необходимо кинуть и файлы шрифтов (open-iconic.otf и другие).


Обратите внимание, что код был сокращен за счет использования

[class*=" oi-"]:before,[class*="oi-"]:before{font-family:Icons;display:inline-block;speak:none;line-height:1;vertical-align:baseline;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

Также мы изменили логику вывода иконок. Авторы предлагают для них создавать отдельную строку data-glyph (наверное, они считают, что это "круто"). Например:

<span class="oi" data-glyph="icon-name" title="icon name" aria-hidden="true"></span>

Мы же заменили все на привычные для себя (и для Вас наверняка тоже) классы:

.oi-account-login:before{content:'\e000'}

Помимо того, что это сократит HTML код страницы, это также логичнее и привычнее использовать, не прописывая и запоминая дополнительные данные.

CSS:

/* http://inverser.pro/106 | v1.1.1 | https://github.com/iconic/open-iconic*/
@font-face{font-family:Icons;src:url(open-iconic.eot);src:url(open-iconic.eot?#iconic-sm) format('embedded-opentype'),url(open-iconic.woff) format('woff'),url(open-iconic.ttf) format('truetype'),url(open-iconic.otf) format('opentype'),url(open-iconic.svg#iconic-sm) format('svg');font-weight:400;font-style:normal}
[class*=" oi-"].oi-text-replace{font-size:0;line-height:0}
[class*=" oi-"].oi-text-replace:before{width:1em;text-align:center}
[class*=" oi-"]:before,[class*="oi-"]:before{font-family:Icons;display:inline-block;speak:none;line-height:1;vertical-align:baseline;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
[class*=" oi-"]:empty:before{width:1em;text-align:center;box-sizing:content-box}
[class*=" oi-"].oi-align-left:before{text-align:left}
[class*=" oi-"].oi-align-right:before{text-align:right}
[class*=" oi-"].oi-align-center:before{text-align:center}
[class*=" oi-"].oi-flip-horizontal:before{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}
[class*=" oi-"].oi-flip-vertical:before{-webkit-transform:scale(1,-1);-ms-transform:scale(-1,1);transform:scale(1,-1)}
[class*=" oi-"].oi-flip-horizontal-vertical:before{-webkit-transform:scale(-1,-1);-ms-transform:scale(-1,1);transform:scale(-1,-1)}
.oi-account-login:before{content:'\e000'}
.oi-account-logout:before{content:'\e001'}
.oi-action-redo:before{content:'\e002'}
.oi-action-undo:before{content:'\e003'}
.oi-align-center:before{content:'\e004'}
.oi-align-left:before{content:'\e005'}
.oi-align-right:before{content:'\e006'}
.oi-aperture:before{content:'\e007'}
.oi-arrow-bottom:before{content:'\e008'}
.oi-arrow-circle-bottom:before{content:'\e009'}
.oi-arrow-circle-left:before{content:'\e00a'}
.oi-arrow-circle-right:before{content:'\e00b'}
.oi-arrow-circle-top:before{content:'\e00c'}
.oi-arrow-left:before{content:'\e00d'}
.oi-arrow-right:before{content:'\e00e'}
.oi-arrow-thick-bottom:before{content:'\e00f'}
.oi-arrow-thick-left:before{content:'\e010'}
.oi-arrow-thick-right:before{content:'\e011'}
.oi-arrow-thick-top:before{content:'\e012'}
.oi-arrow-top:before{content:'\e013'}
.oi-audio-spectrum:before{content:'\e014'}
.oi-audio:before{content:'\e015'}
.oi-badge:before{content:'\e016'}
.oi-ban:before{content:'\e017'}
.oi-bar-chart:before{content:'\e018'}
.oi-basket:before{content:'\e019'}
.oi-battery-empty:before{content:'\e01a'}
.oi-battery-full:before{content:'\e01b'}
.oi-beaker:before{content:'\e01c'}
.oi-bell:before{content:'\e01d'}
.oi-bluetooth:before{content:'\e01e'}
.oi-bold:before{content:'\e01f'}
.oi-bolt:before{content:'\e020'}
.oi-book:before{content:'\e021'}
.oi-bookmark:before{content:'\e022'}
.oi-box:before{content:'\e023'}
.oi-briefcase:before{content:'\e024'}
.oi-british-pound:before{content:'\e025'}
.oi-browser:before{content:'\e026'}
.oi-brush:before{content:'\e027'}
.oi-bug:before{content:'\e028'}
.oi-bullhorn:before{content:'\e029'}
.oi-calculator:before{content:'\e02a'}
.oi-calendar:before{content:'\e02b'}
.oi-camera-slr:before{content:'\e02c'}
.oi-caret-bottom:before{content:'\e02d'}
.oi-caret-left:before{content:'\e02e'}
.oi-caret-right:before{content:'\e02f'}
.oi-caret-top:before{content:'\e030'}
.oi-cart:before{content:'\e031'}
.oi-chat:before{content:'\e032'}
.oi-check:before{content:'\e033'}
.oi-chevron-bottom:before{content:'\e034'}
.oi-chevron-left:before{content:'\e035'}
.oi-chevron-right:before{content:'\e036'}
.oi-chevron-top:before{content:'\e037'}
.oi-circle-check:before{content:'\e038'}
.oi-circle-x:before{content:'\e039'}
.oi-clipboard:before{content:'\e03a'}
.oi-clock:before{content:'\e03b'}
.oi-cloud-download:before{content:'\e03c'}
.oi-cloud-upload:before{content:'\e03d'}
.oi-cloud:before{content:'\e03e'}
.oi-cloudy:before{content:'\e03f'}
.oi-code:before{content:'\e040'}
.oi-cog:before{content:'\e041'}
.oi-collapse-down:before{content:'\e042'}
.oi-collapse-left:before{content:'\e043'}
.oi-collapse-right:before{content:'\e044'}
.oi-collapse-up:before{content:'\e045'}
.oi-command:before{content:'\e046'}
.oi-comment-square:before{content:'\e047'}
.oi-compass:before{content:'\e048'}
.oi-contrast:before{content:'\e049'}
.oi-copywriting:before{content:'\e04a'}
.oi-credit-card:before{content:'\e04b'}
.oi-crop:before{content:'\e04c'}
.oi-dashboard:before{content:'\e04d'}
.oi-data-transfer-download:before{content:'\e04e'}
.oi-data-transfer-upload:before{content:'\e04f'}
.oi-delete:before{content:'\e050'}
.oi-dial:before{content:'\e051'}
.oi-document:before{content:'\e052'}
.oi-dollar:before{content:'\e053'}
.oi-double-quote-sans-left:before{content:'\e054'}
.oi-double-quote-sans-right:before{content:'\e055'}
.oi-double-quote-serif-left:before{content:'\e056'}
.oi-double-quote-serif-right:before{content:'\e057'}
.oi-droplet:before{content:'\e058'}
.oi-eject:before{content:'\e059'}
.oi-elevator:before{content:'\e05a'}
.oi-ellipses:before{content:'\e05b'}
.oi-envelope-closed:before{content:'\e05c'}
.oi-envelope-open:before{content:'\e05d'}
.oi-euro:before{content:'\e05e'}
.oi-excerpt:before{content:'\e05f'}
.oi-expand-down:before{content:'\e060'}
.oi-expand-left:before{content:'\e061'}
.oi-expand-right:before{content:'\e062'}
.oi-expand-up:before{content:'\e063'}
.oi-external-link:before{content:'\e064'}
.oi-eye:before{content:'\e065'}
.oi-eyedropper:before{content:'\e066'}
.oi-file:before{content:'\e067'}
.oi-fire:before{content:'\e068'}
.oi-flag:before{content:'\e069'}
.oi-flash:before{content:'\e06a'}
.oi-folder:before{content:'\e06b'}
.oi-fork:before{content:'\e06c'}
.oi-fullscreen-enter:before{content:'\e06d'}
.oi-fullscreen-exit:before{content:'\e06e'}
.oi-globe:before{content:'\e06f'}
.oi-graph:before{content:'\e070'}
.oi-grid-four-up:before{content:'\e071'}
.oi-grid-three-up:before{content:'\e072'}
.oi-grid-two-up:before{content:'\e073'}
.oi-hard-drive:before{content:'\e074'}
.oi-header:before{content:'\e075'}
.oi-headphones:before{content:'\e076'}
.oi-heart:before{content:'\e077'}
.oi-home:before{content:'\e078'}
.oi-image:before{content:'\e079'}
.oi-inbox:before{content:'\e07a'}
.oi-infinity:before{content:'\e07b'}
.oi-info:before{content:'\e07c'}
.oi-italic:before{content:'\e07d'}
.oi-justify-center:before{content:'\e07e'}
.oi-justify-left:before{content:'\e07f'}
.oi-justify-right:before{content:'\e080'}
.oi-key:before{content:'\e081'}
.oi-laptop:before{content:'\e082'}
.oi-layers:before{content:'\e083'}
.oi-lightbulb:before{content:'\e084'}
.oi-link-broken:before{content:'\e085'}
.oi-link-intact:before{content:'\e086'}
.oi-list-rich:before{content:'\e087'}
.oi-list:before{content:'\e088'}
.oi-location:before{content:'\e089'}
.oi-lock-locked:before{content:'\e08a'}
.oi-lock-unlocked:before{content:'\e08b'}
.oi-loop-circular:before{content:'\e08c'}
.oi-loop-square:before{content:'\e08d'}
.oi-loop:before{content:'\e08e'}
.oi-magnifying-glass:before{content:'\e08f'}
.oi-map-marker:before{content:'\e090'}
.oi-map:before{content:'\e091'}
.oi-media-pause:before{content:'\e092'}
.oi-media-play:before{content:'\e093'}
.oi-media-record:before{content:'\e094'}
.oi-media-skip-backward:before{content:'\e095'}
.oi-media-skip-forward:before{content:'\e096'}
.oi-media-step-backward:before{content:'\e097'}
.oi-media-step-forward:before{content:'\e098'}
.oi-media-stop:before{content:'\e099'}
.oi-medical-cross:before{content:'\e09a'}
.oi-menu:before{content:'\e09b'}
.oi-microphone:before{content:'\e09c'}
.oi-minus:before{content:'\e09d'}
.oi-monitor:before{content:'\e09e'}
.oi-moon:before{content:'\e09f'}
.oi-move:before{content:'\e0a0'}
.oi-musical-note:before{content:'\e0a1'}
.oi-paperclip:before{content:'\e0a2'}
.oi-pencil:before{content:'\e0a3'}
.oi-people:before{content:'\e0a4'}
.oi-person:before{content:'\e0a5'}
.oi-phone:before{content:'\e0a6'}
.oi-pie-chart:before{content:'\e0a7'}
.oi-pin:before{content:'\e0a8'}
.oi-play-circle:before{content:'\e0a9'}
.oi-plus:before{content:'\e0aa'}
.oi-power-standby:before{content:'\e0ab'}
.oi-print:before{content:'\e0ac'}
.oi-project:before{content:'\e0ad'}
.oi-pulse:before{content:'\e0ae'}
.oi-puzzle-piece:before{content:'\e0af'}
.oi-question-mark:before{content:'\e0b0'}
.oi-rain:before{content:'\e0b1'}
.oi-random:before{content:'\e0b2'}
.oi-reload:before{content:'\e0b3'}
.oi-resize-both:before{content:'\e0b4'}
.oi-resize-height:before{content:'\e0b5'}
.oi-resize-width:before{content:'\e0b6'}
.oi-rss-alt:before{content:'\e0b7'}
.oi-rss:before{content:'\e0b8'}
.oi-script:before{content:'\e0b9'}
.oi-share-boxed:before{content:'\e0ba'}
.oi-share:before{content:'\e0bb'}
.oi-shield:before{content:'\e0bc'}
.oi-signal:before{content:'\e0bd'}
.oi-signpost:before{content:'\e0be'}
.oi-sort-ascending:before{content:'\e0bf'}
.oi-sort-descending:before{content:'\e0c0'}
.oi-spreadsheet:before{content:'\e0c1'}
.oi-star:before{content:'\e0c2'}
.oi-sun:before{content:'\e0c3'}
.oi-tablet:before{content:'\e0c4'}
.oi-tag:before{content:'\e0c5'}
.oi-tags:before{content:'\e0c6'}
.oi-target:before{content:'\e0c7'}
.oi-task:before{content:'\e0c8'}
.oi-terminal:before{content:'\e0c9'}
.oi-text:before{content:'\e0ca'}
.oi-thumb-down:before{content:'\e0cb'}
.oi-thumb-up:before{content:'\e0cc'}
.oi-timer:before{content:'\e0cd'}
.oi-transfer:before{content:'\e0ce'}
.oi-trash:before{content:'\e0cf'}
.oi-underline:before{content:'\e0d0'}
.oi-vertical-align-bottom:before{content:'\e0d1'}
.oi-vertical-align-center:before{content:'\e0d2'}
.oi-vertical-align-top:before{content:'\e0d3'}
.oi-video:before{content:'\e0d4'}
.oi-volume-high:before{content:'\e0d5'}
.oi-volume-low:before{content:'\e0d6'}
.oi-volume-off:before{content:'\e0d7'}
.oi-warning:before{content:'\e0d8'}
.oi-wifi:before{content:'\e0d9'}
.oi-wrench:before{content:'\e0da'}
.oi-x:before{content:'\e0db'}
.oi-yen:before{content:'\e0dc'}
.oi-zoom-in:before{content:'\e0dd'}
.oi-zoom-out:before{content:'\e0de'}

Управление размером шрифта:

font-size:10px
font-size:12px
font-size:18px
font-size:24px
font-size:32px
font-size:42px
font-size:56px
font-size:76px
font-size:92px
HTML класс
CSS код символа
Результат
oi-account-login
\e000
oi-account-logout
\e001
oi-action-redo
\e002
oi-action-undo
\e003
oi-align-center
\e004
oi-align-left
\e005
oi-align-right
\e006
oi-aperture
\e007
oi-arrow-bottom
\e008
oi-arrow-circle-bottom
\e009
oi-arrow-circle-left
\e00a
oi-arrow-circle-right
\e00b
oi-arrow-circle-top
\e00c
oi-arrow-left
\e00d
oi-arrow-right
\e00e
oi-arrow-thick-bottom
\e00f
oi-arrow-thick-left
\e010
oi-arrow-thick-right
\e011
oi-arrow-thick-top
\e012
oi-arrow-top
\e013
oi-audio-spectrum
\e014
oi-audio
\e015
oi-badge
\e016
oi-ban
\e017
oi-bar-chart
\e018
oi-basket
\e019
oi-battery-empty
\e01a
oi-battery-full
\e01b
oi-beaker
\e01c
oi-bell
\e01d
oi-bluetooth
\e01e
oi-bold
\e01f
oi-bolt
\e020
oi-book
\e021
oi-bookmark
\e022
oi-box
\e023
oi-briefcase
\e024
oi-british-pound
\e025
oi-browser
\e026
oi-brush
\e027
oi-bug
\e028
oi-bullhorn
\e029
oi-calculator
\e02a
oi-calendar
\e02b
oi-camera-slr
\e02c
oi-caret-bottom
\e02d
oi-caret-left
\e02e
oi-caret-right
\e02f
oi-caret-top
\e030
oi-cart
\e031
oi-chat
\e032
oi-check
\e033
oi-chevron-bottom
\e034
oi-chevron-left
\e035
oi-chevron-right
\e036
oi-chevron-top
\e037
oi-circle-check
\e038
oi-circle-x
\e039
oi-clipboard
\e03a
oi-clock
\e03b
oi-cloud-download
\e03c
oi-cloud-upload
\e03d
oi-cloud
\e03e
oi-cloudy
\e03f
oi-code
\e040
oi-cog
\e041
oi-collapse-down
\e042
oi-collapse-left
\e043
oi-collapse-right
\e044
oi-collapse-up
\e045
oi-command
\e046
oi-comment-square
\e047
oi-compass
\e048
oi-contrast
\e049
oi-copywriting
\e04a
oi-credit-card
\e04b
oi-crop
\e04c
oi-dashboard
\e04d
oi-data-transfer-download
\e04e
oi-data-transfer-upload
\e04f
oi-delete
\e050
oi-dial
\e051
oi-document
\e052
oi-dollar
\e053
oi-double-quote-sans-left
\e054
oi-double-quote-sans-right
\e055
oi-double-quote-serif-left
\e056
oi-double-quote-serif-right
\e057
oi-droplet
\e058
oi-eject
\e059
oi-elevator
\e05a
oi-ellipses
\e05b
oi-envelope-closed
\e05c
oi-envelope-open
\e05d
oi-euro
\e05e
oi-excerpt
\e05f
oi-expand-down
\e060
oi-expand-left
\e061
oi-expand-right
\e062
oi-expand-up
\e063
oi-external-link
\e064
oi-eye
\e065
oi-eyedropper
\e066
oi-file
\e067
oi-fire
\e068
oi-flag
\e069
oi-flash
\e06a
oi-folder
\e06b
oi-fork
\e06c
oi-fullscreen-enter
\e06d
oi-fullscreen-exit
\e06e
oi-globe
\e06f
oi-graph
\e070
oi-grid-four-up
\e071
oi-grid-three-up
\e072
oi-grid-two-up
\e073
oi-hard-drive
\e074
oi-header
\e075
oi-headphones
\e076
oi-heart
\e077
oi-home
\e078
oi-image
\e079
oi-inbox
\e07a
oi-infinity
\e07b
oi-info
\e07c
oi-italic
\e07d
oi-justify-center
\e07e
oi-justify-left
\e07f
oi-justify-right
\e080
oi-key
\e081
oi-laptop
\e082
oi-layers
\e083
oi-lightbulb
\e084
oi-link-broken
\e085
oi-link-intact
\e086
oi-list-rich
\e087
oi-list
\e088
oi-location
\e089
oi-lock-locked
\e08a
oi-lock-unlocked
\e08b
oi-loop-circular
\e08c
oi-loop-square
\e08d
oi-loop
\e08e
oi-magnifying-glass
\e08f
oi-map-marker
\e090
oi-map
\e091
oi-media-pause
\e092
oi-media-play
\e093
oi-media-record
\e094
oi-media-skip-backward
\e095
oi-media-skip-forward
\e096
oi-media-step-backward
\e097
oi-media-step-forward
\e098
oi-media-stop
\e099
oi-medical-cross
\e09a
oi-menu
\e09b
oi-microphone
\e09c
oi-minus
\e09d
oi-monitor
\e09e
oi-moon
\e09f
oi-move
\e0a0
oi-musical-note
\e0a1
oi-paperclip
\e0a2
oi-pencil
\e0a3
oi-people
\e0a4
oi-person
\e0a5
oi-phone
\e0a6
oi-pie-chart
\e0a7
oi-pin
\e0a8
oi-play-circle
\e0a9
oi-plus
\e0aa
oi-power-standby
\e0ab
oi-print
\e0ac
oi-project
\e0ad
oi-pulse
\e0ae
oi-puzzle-piece
\e0af
oi-question-mark
\e0b0
oi-rain
\e0b1
oi-random
\e0b2
oi-reload
\e0b3
oi-resize-both
\e0b4
oi-resize-height
\e0b5
oi-resize-width
\e0b6
oi-rss-alt
\e0b7
oi-rss
\e0b8
oi-script
\e0b9
oi-share-boxed
\e0ba
oi-share
\e0bb
oi-shield
\e0bc
oi-signal
\e0bd
oi-signpost
\e0be
oi-sort-ascending
\e0bf
oi-sort-descending
\e0c0
oi-spreadsheet
\e0c1
oi-star
\e0c2
oi-sun
\e0c3
oi-tablet
\e0c4
oi-tag
\e0c5
oi-tags
\e0c6
oi-target
\e0c7
oi-task
\e0c8
oi-terminal
\e0c9
oi-text
\e0ca
oi-thumb-down
\e0cb
oi-thumb-up
\e0cc
oi-timer
\e0cd
oi-transfer
\e0ce
oi-trash
\e0cf
oi-underline
\e0d0
oi-vertical-align-bottom
\e0d1
oi-vertical-align-center
\e0d2
oi-vertical-align-top
\e0d3
oi-video
\e0d4
oi-volume-high
\e0d5
oi-volume-low
\e0d6
oi-volume-off
\e0d7
oi-warning
\e0d8
oi-wifi
\e0d9
oi-wrench
\e0da
oi-x
\e0db
oi-yen
\e0dc
oi-zoom-in
\e0dd
oi-zoom-out
\e0de
Open Iconic
Официальный сайт

Файлы Open Iconic:

Скачать Open Iconic