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

Dashicons – небольшой набор шрифтовых иконок, которые используются в WordPress. Интересные иконки для административной панели сайта и не только.

Шрифты-иконки «Dashicons» (233 иконки). Подключение:

@font-face {
font-family: dashicons;
src: url(../fonts/dashicons.eot)
}

@font-face {
font-family: dashicons;
src: url(../fonts/dashicons.woff) format('woff'), url(../fonts/dashicons.ttf) format("truetype"), url(../fonts/dashicons.svg#dashicons) format("svg");
font-weight: 400;
font-style: normal
}

При этом сам CSS файл должен лежать в папке 'css', а шрифты в папке 'fonts'.

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

.dashicons-menu:before{content:"\f333"}

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

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

<div class="one"><i class="dashicons dashicons-media-default"></i> Скачать файл</div>

Получится:

 Скачать файл

CSS:

/*//inverser.pro/135*/
@font-face{font-family:dashicons;src:url(dashicons.eot)}@font-face{font-family:dashicons;src:url(dashicons.woff) format('woff'),url(dashicons.ttf) format("truetype"),url(dashicons.svg#dashicons) format("svg");font-weight:400;font-style:normal}
.dashicons,.dashicons-before:before{display:inline-block;font-size:20px;line-height:1;font-family:dashicons;text-decoration:inherit;font-weight:400;font-style:normal;vertical-align:top;text-align:center;transition:color .1s ease-in;-webkit-font-smoothing:antialiased}
.dashicons-menu:before{content:"\f333"}
.dashicons-admin-site:before{content:"\f319"}
.dashicons-dashboard:before{content:"\f226"}
.dashicons-admin-media:before{content:"\f104"}
.dashicons-admin-page:before{content:"\f105"}
.dashicons-admin-comments:before{content:"\f101"}
.dashicons-admin-appearance:before{content:"\f100"}
.dashicons-admin-plugins:before{content:"\f106"}
.dashicons-admin-users:before{content:"\f110"}
.dashicons-admin-tools:before{content:"\f107"}
.dashicons-admin-settings:before{content:"\f108"}
.dashicons-admin-network:before{content:"\f112"}
.dashicons-admin-generic:before{content:"\f111"}
.dashicons-admin-home:before{content:"\f102"}
.dashicons-admin-collapse:before{content:"\f148"}
.dashicons-filter:before{content:"\f536"}
.dashicons-admin-customizer:before{content:"\f540"}
.dashicons-admin-multisite:before{content:"\f541"}
.dashicons-admin-links:before,.dashicons-format-links:before{content:"\f103"}
.dashicons-admin-post:before,.dashicons-format-standard:before{content:"\f109"}
.dashicons-format-image:before{content:"\f128"}
.dashicons-format-gallery:before{content:"\f161"}
.dashicons-format-audio:before{content:"\f127"}
.dashicons-format-video:before{content:"\f126"}
.dashicons-format-chat:before{content:"\f125"}
.dashicons-format-status:before{content:"\f130"}
.dashicons-format-aside:before{content:"\f123"}
.dashicons-format-quote:before{content:"\f122"}
.dashicons-welcome-edit-page:before,.dashicons-welcome-write-blog:before{content:"\f119"}
.dashicons-welcome-add-page:before{content:"\f133"}
.dashicons-welcome-view-site:before{content:"\f115"}
.dashicons-welcome-widgets-menus:before{content:"\f116"}
.dashicons-welcome-comments:before{content:"\f117"}
.dashicons-welcome-learn-more:before{content:"\f118"}
.dashicons-image-crop:before{content:"\f165"}
.dashicons-image-rotate:before{content:"\f531"}
.dashicons-image-rotate-left:before{content:"\f166"}
.dashicons-image-rotate-right:before{content:"\f167"}
.dashicons-image-flip-vertical:before{content:"\f168"}
.dashicons-image-flip-horizontal:before{content:"\f169"}
.dashicons-image-filter:before{content:"\f533"}
.dashicons-undo:before{content:"\f171"}
.dashicons-redo:before{content:"\f172"}
.dashicons-editor-bold:before{content:"\f200"}
.dashicons-editor-italic:before{content:"\f201"}
.dashicons-editor-ul:before{content:"\f203"}
.dashicons-editor-ol:before{content:"\f204"}
.dashicons-editor-quote:before{content:"\f205"}
.dashicons-editor-alignleft:before{content:"\f206"}
.dashicons-editor-aligncenter:before{content:"\f207"}
.dashicons-editor-alignright:before{content:"\f208"}
.dashicons-editor-insertmore:before{content:"\f209"}
.dashicons-editor-spellcheck:before{content:"\f210"}
.dashicons-editor-distractionfree:before,.dashicons-editor-expand:before{content:"\f211"}
.dashicons-editor-contract:before{content:"\f506"}
.dashicons-editor-kitchensink:before{content:"\f212"}
.dashicons-editor-underline:before{content:"\f213"}
.dashicons-editor-justify:before{content:"\f214"}
.dashicons-editor-textcolor:before{content:"\f215"}
.dashicons-editor-paste-word:before{content:"\f216"}
.dashicons-editor-paste-text:before{content:"\f217"}
.dashicons-editor-removeformatting:before{content:"\f218"}
.dashicons-editor-video:before{content:"\f219"}
.dashicons-editor-customchar:before{content:"\f220"}
.dashicons-editor-outdent:before{content:"\f221"}
.dashicons-editor-indent:before{content:"\f222"}
.dashicons-editor-help:before{content:"\f223"}
.dashicons-editor-strikethrough:before{content:"\f224"}
.dashicons-editor-unlink:before{content:"\f225"}
.dashicons-editor-rtl:before{content:"\f320"}
.dashicons-editor-break:before{content:"\f474"}
.dashicons-editor-code:before{content:"\f475"}
.dashicons-editor-paragraph:before{content:"\f476"}
.dashicons-editor-table:before{content:"\f535"}
.dashicons-align-left:before{content:"\f135"}
.dashicons-align-right:before{content:"\f136"}
.dashicons-align-center:before{content:"\f134"}
.dashicons-align-none:before{content:"\f138"}
.dashicons-lock:before{content:"\f160"}
.dashicons-unlock:before{content:"\f528"}
.dashicons-calendar:before{content:"\f145"}
.dashicons-calendar-alt:before{content:"\f508"}
.dashicons-visibility:before{content:"\f177"}
.dashicons-hidden:before{content:"\f530"}
.dashicons-post-status:before{content:"\f173"}
.dashicons-edit:before{content:"\f464"}
.dashicons-post-trash:before,.dashicons-trash:before{content:"\f182"}
.dashicons-sticky:before{content:"\f537"}
.dashicons-external:before{content:"\f504"}
.dashicons-arrow-up:before{content:"\f142"}
.dashicons-arrow-down:before{content:"\f140"}
.dashicons-arrow-left:before{content:"\f141"}
.dashicons-arrow-right:before{content:"\f139"}
.dashicons-arrow-up-alt:before{content:"\f342"}
.dashicons-arrow-down-alt:before{content:"\f346"}
.dashicons-arrow-left-alt:before{content:"\f340"}
.dashicons-arrow-right-alt:before{content:"\f344"}
.dashicons-arrow-up-alt2:before{content:"\f343"}
.dashicons-arrow-down-alt2:before{content:"\f347"}
.dashicons-arrow-left-alt2:before{content:"\f341"}
.dashicons-arrow-right-alt2:before{content:"\f345"}
.dashicons-leftright:before{content:"\f229"}
.dashicons-sort:before{content:"\f156"}
.dashicons-randomize:before{content:"\f503"}
.dashicons-list-view:before{content:"\f163"}
.dashicons-excerpt-view:before,.dashicons-exerpt-view:before{content:"\f164"}
.dashicons-grid-view:before{content:"\f509"}
.dashicons-move:before{content:"\f545"}
.dashicons-hammer:before{content:"\f308"}
.dashicons-art:before{content:"\f309"}
.dashicons-migrate:before{content:"\f310"}
.dashicons-performance:before{content:"\f311"}
.dashicons-universal-access:before{content:"\f483"}
.dashicons-universal-access-alt:before{content:"\f507"}
.dashicons-tickets:before{content:"\f486"}
.dashicons-nametag:before{content:"\f484"}
.dashicons-clipboard:before{content:"\f481"}
.dashicons-heart:before{content:"\f487"}
.dashicons-megaphone:before{content:"\f488"}
.dashicons-schedule:before{content:"\f489"}
.dashicons-wordpress:before{content:"\f120"}
.dashicons-wordpress-alt:before{content:"\f324"}
.dashicons-pressthis:before{content:"\f157"}
.dashicons-update:before{content:"\f463"}
.dashicons-screenoptions:before{content:"\f180"}
.dashicons-cart:before{content:"\f174"}
.dashicons-feedback:before{content:"\f175"}
.dashicons-cloud:before{content:"\f176"}
.dashicons-translation:before{content:"\f326"}
.dashicons-tag:before{content:"\f323"}
.dashicons-category:before{content:"\f318"}
.dashicons-archive:before{content:"\f480"}
.dashicons-tagcloud:before{content:"\f479"}
.dashicons-text:before{content:"\f478"}
.dashicons-media-archive:before{content:"\f501"}
.dashicons-media-audio:before{content:"\f500"}
.dashicons-media-code:before{content:"\f499"}
.dashicons-media-default:before{content:"\f498"}
.dashicons-media-document:before{content:"\f497"}
.dashicons-media-interactive:before{content:"\f496"}
.dashicons-media-spreadsheet:before{content:"\f495"}
.dashicons-media-text:before{content:"\f491"}
.dashicons-media-video:before{content:"\f490"}
.dashicons-playlist-audio:before{content:"\f492"}
.dashicons-playlist-video:before{content:"\f493"}
.dashicons-controls-play:before{content:"\f522"}
.dashicons-controls-pause:before{content:"\f523"}
.dashicons-controls-forward:before{content:"\f519"}
.dashicons-controls-skipforward:before{content:"\f517"}
.dashicons-controls-back:before{content:"\f518"}
.dashicons-controls-skipback:before{content:"\f516"}
.dashicons-controls-repeat:before{content:"\f515"}
.dashicons-controls-volumeon:before{content:"\f521"}
.dashicons-controls-volumeoff:before{content:"\f520"}
.dashicons-yes:before{content:"\f147"}
.dashicons-no:before{content:"\f158"}
.dashicons-no-alt:before{content:"\f335"}
.dashicons-plus:before{content:"\f132"}
.dashicons-plus-alt:before{content:"\f502"}
.dashicons-plus-alt2:before{content:"\f543"}
.dashicons-minus:before{content:"\f460"}
.dashicons-dismiss:before{content:"\f153"}
.dashicons-marker:before{content:"\f159"}
.dashicons-star-filled:before{content:"\f155"}
.dashicons-star-half:before{content:"\f459"}
.dashicons-star-empty:before{content:"\f154"}
.dashicons-flag:before{content:"\f227"}
.dashicons-info:before{content:"\f348"}
.dashicons-warning:before{content:"\f534"}
.dashicons-share:before{content:"\f237"}
.dashicons-share1:before{content:"\f237"}
.dashicons-share-alt:before{content:"\f240"}
.dashicons-share-alt2:before{content:"\f242"}
.dashicons-twitter:before{content:"\f301"}
.dashicons-rss:before{content:"\f303"}
.dashicons-email:before{content:"\f465"}
.dashicons-email-alt:before{content:"\f466"}
.dashicons-facebook:before{content:"\f304"}
.dashicons-facebook-alt:before{content:"\f305"}
.dashicons-networking:before{content:"\f325"}
.dashicons-googleplus:before{content:"\f462"}
.dashicons-location:before{content:"\f230"}
.dashicons-location-alt:before{content:"\f231"}
.dashicons-camera:before{content:"\f306"}
.dashicons-images-alt:before{content:"\f232"}
.dashicons-images-alt2:before{content:"\f233"}
.dashicons-video-alt:before{content:"\f234"}
.dashicons-video-alt2:before{content:"\f235"}
.dashicons-video-alt3:before{content:"\f236"}
.dashicons-vault:before{content:"\f178"}
.dashicons-shield:before{content:"\f332"}
.dashicons-shield-alt:before{content:"\f334"}
.dashicons-sos:before{content:"\f468"}
.dashicons-search:before{content:"\f179"}
.dashicons-slides:before{content:"\f181"}
.dashicons-analytics:before{content:"\f183"}
.dashicons-chart-pie:before{content:"\f184"}
.dashicons-chart-bar:before{content:"\f185"}
.dashicons-chart-line:before{content:"\f238"}
.dashicons-chart-area:before{content:"\f239"}
.dashicons-groups:before{content:"\f307"}
.dashicons-businessman:before{content:"\f338"}
.dashicons-id:before{content:"\f336"}
.dashicons-id-alt:before{content:"\f337"}
.dashicons-products:before{content:"\f312"}
.dashicons-awards:before{content:"\f313"}
.dashicons-forms:before{content:"\f314"}
.dashicons-testimonial:before{content:"\f473"}
.dashicons-portfolio:before{content:"\f322"}
.dashicons-book:before{content:"\f330"}
.dashicons-book-alt:before{content:"\f331"}
.dashicons-download:before{content:"\f316"}
.dashicons-upload:before{content:"\f317"}
.dashicons-backup:before{content:"\f321"}
.dashicons-clock:before{content:"\f469"}
.dashicons-lightbulb:before{content:"\f339"}
.dashicons-microphone:before{content:"\f482"}
.dashicons-desktop:before{content:"\f472"}
.dashicons-laptop:before{content:"\f547"}
.dashicons-tablet:before{content:"\f471"}
.dashicons-smartphone:before{content:"\f470"}
.dashicons-phone:before{content:"\f525"}
.dashicons-smiley:before{content:"\f328"}
.dashicons-index-card:before{content:"\f510"}
.dashicons-carrot:before{content:"\f511"}
.dashicons-building:before{content:"\f512"}
.dashicons-store:before{content:"\f513"}
.dashicons-album:before{content:"\f514"}
.dashicons-palmtree:before{content:"\f527"}
.dashicons-tickets-alt:before{content:"\f524"}
.dashicons-money:before{content:"\f526"}
.dashicons-thumbs-up:before{content:"\f529"}
.dashicons-thumbs-down:before{content:"\f542"}
.dashicons-layout:before{content:"\f538"}
.dashicons-paperclip:before{content:"\f546"}

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

font-size:10px
font-size:12px
font-size:18px
font-size:24px
font-size:32px
font-size:40px
font-size:56px
font-size:76px
font-size:92px

Тест

Введите в поле ниже ТОЛЬКО имя класса (например: 'dashicons-admin-site'):

Чтобы было удобнее, можно добавить вот такой стиль:

[class^="dashicons-"]:before,[class*=" dashicons-"]:before{font-family:dashicons !important;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

после чего Вы сможете НЕ писать постоянно:

dashicons dashicons-menu

а писать так:

dashicons-menu
HTML класс, CSS код символа, результат

Меню администратора

\f333
dashicons-menu
\f319
dashicons-admin-site
\f226
dashicons-dashboard
\f109
dashicons-admin-post
\f104
dashicons-admin-media
\f103
\f105
dashicons-admin-page
\f101
dashicons-admin-comments
\f100
dashicons-admin-appearance
\f106
dashicons-admin-plugins
\f110
dashicons-admin-users
\f107
dashicons-admin-tools
\f108
dashicons-admin-settings
\f112
dashicons-admin-network
\f102
dashicons-admin-home
\f111
dashicons-admin-generic
\f148
dashicons-admin-collapse
\f536
dashicons-filter
\f540
dashicons-admin-customizer
\f541
dashicons-admin-multisite

Экран приветствия

\f119
dashicons-welcome-write-blog
\f133
dashicons-welcome-add-page
\f115
dashicons-welcome-view-site
\f116
dashicons-welcome-widgets-menus
\f117
dashicons-welcome-comments
\f118
dashicons-welcome-learn-more

Форматы сообщений

\f123
dashicons-format-aside
\f128
dashicons-format-image
\f161
\f126
dashicons-format-video
\f130
dashicons-format-status
\f122
dashicons-format-quote
\f125
dashicons-format-chat
\f127
dashicons-format-audio
\f306
dashicons-camera
\f232
dashicons-images-alt
\f233
dashicons-images-alt2
\f234
dashicons-video-alt
\f235
dashicons-video-alt2
\f236
dashicons-video-alt3

Медиа

\f501
dashicons-media-archive
\f500
dashicons-media-audio
\f499
dashicons-media-code
\f498
dashicons-media-default
\f497
dashicons-media-document
\f496
dashicons-media-interactive
\f495
dashicons-media-spreadsheet
\f491
dashicons-media-text
\f490
dashicons-media-video
\f492
dashicons-playlist-audio
\f493
dashicons-playlist-video
\f522
dashicons-controls-play
\f523
dashicons-controls-pause
\f519
dashicons-controls-forward
\f517
dashicons-controls-skipforward
\f518
dashicons-controls-back
\f516
dashicons-controls-skipback
\f515
dashicons-controls-repeat
\f521
dashicons-controls-volumeon
\f520
dashicons-controls-volumeoff

Редактирование изображений

\f165
dashicons-image-crop
\f531
dashicons-image-rotate
\f166
dashicons-image-rotate-left
\f167
dashicons-image-rotate-right
\f168
dashicons-image-flip-vertical
\f169
dashicons-image-flip-horizontal
\f533
dashicons-image-filter
\f171
dashicons-undo
\f172
dashicons-redo

TinyMCE

\f200
dashicons-editor-bold
\f201
dashicons-editor-italic
\f203
dashicons-editor-ul
\f204
dashicons-editor-ol
\f205
dashicons-editor-quote
\f206
dashicons-editor-alignleft
\f207
dashicons-editor-aligncenter
\f208
dashicons-editor-alignright
\f209
dashicons-editor-insertmore
\f210
dashicons-editor-spellcheck
\f211
dashicons-editor-expand
\f506
dashicons-editor-contract
\f212
dashicons-editor-kitchensink
\f213
dashicons-editor-underline
\f214
dashicons-editor-justify
\f215
dashicons-editor-textcolor
\f216
dashicons-editor-paste-word
\f217
dashicons-editor-paste-text
\f218
dashicons-editor-removeformatting
\f219
dashicons-editor-video
\f220
dashicons-editor-customchar
\f221
dashicons-editor-outdent
\f222
dashicons-editor-indent
\f223
dashicons-editor-help
\f224
dashicons-editor-strikethrough
\f225
\f320
dashicons-editor-rtl
\f474
dashicons-editor-break
\f475
dashicons-editor-code
\f476
dashicons-editor-paragraph
\f535
dashicons-editor-table

Экран сообщений

\f135
dashicons-align-left
\f136
dashicons-align-right
\f134
dashicons-align-center
\f138
dashicons-align-none
\f160
dashicons-lock
\f528
dashicons-unlock
\f145
dashicons-calendar
\f508
dashicons-calendar-alt
\f177
dashicons-visibility
\f530
dashicons-hidden
\f173
dashicons-post-status
\f464
dashicons-edit
\f182
dashicons-trash
\f537
dashicons-sticky

Сортировка

\f504
dashicons-external
\f142
dashicons-arrow-up
\f140
dashicons-arrow-down
\f139
dashicons-arrow-right
\f141
dashicons-arrow-left
\f342
dashicons-arrow-up-alt
\f346
dashicons-arrow-down-alt
\f344
dashicons-arrow-right-alt
\f340
dashicons-arrow-left-alt
\f343
dashicons-arrow-up-alt2
\f347
dashicons-arrow-down-alt2
\f345
dashicons-arrow-right-alt2
\f341
dashicons-arrow-left-alt2
\f156
dashicons-sort
\f229
dashicons-leftright
\f503
dashicons-randomize
\f163
dashicons-list-view
\f164
dashicons-exerpt-view
\f509
dashicons-grid-view
\f545
dashicons-move

Социальные

\f237
dashicons-share
\f240
dashicons-share-alt
\f242
dashicons-share-alt2
\f301
dashicons-twitter
\f303
dashicons-rss
\f465
dashicons-email
\f466
dashicons-email-alt
\f304
dashicons-facebook
\f305
dashicons-facebook-alt
\f462
dashicons-googleplus
\f325
dashicons-networking

WordPress.org Specific: Работа, профили, WordCamps

\f308
dashicons-hammer
\f309
dashicons-art
\f310
dashicons-migrate
\f311
dashicons-performance
\f483
dashicons-universal-access
\f507
dashicons-universal-access-alt
\f486
dashicons-tickets
\f484
dashicons-nametag
\f481
dashicons-clipboard
\f487
dashicons-heart
\f488
dashicons-megaphone
\f489
dashicons-schedule

Продукты

\f120
dashicons-wordpress
\f324
dashicons-wordpress-alt
\f157
dashicons-pressthis
\f463
dashicons-update
\f180
dashicons-screenoptions
\f348
dashicons-info
\f174
dashicons-cart
\f175
dashicons-feedback
\f176
dashicons-cloud
\f326
dashicons-translation

Таксономия

\f323
dashicons-tag
\f318
dashicons-category

Виджеты

\f480
dashicons-archive
\f479
dashicons-tagcloud
\f478
dashicons-text

Уведомления

\f147
dashicons-yes
\f158
dashicons-no
\f335
dashicons-no-alt
\f132
dashicons-plus
\f502
dashicons-plus-alt
\f460
dashicons-minus
\f153
dashicons-dismiss
\f159
dashicons-marker
\f155
dashicons-star-filled
\f459
dashicons-star-half
\f154
dashicons-star-empty
\f227
dashicons-flag
\f534
dashicons-warning

Разное

\f230
dashicons-location
\f231
dashicons-location-alt
\f178
dashicons-vault
\f332
dashicons-shield
\f334
dashicons-shield-alt
\f468
dashicons-sos
\f179
\f181
dashicons-slides
\f183
dashicons-analytics
\f184
dashicons-chart-pie
\f185
dashicons-chart-bar
\f238
dashicons-chart-line
\f239
dashicons-chart-area
\f307
dashicons-groups
\f338
dashicons-businessman
\f336
dashicons-id
\f337
dashicons-id-alt
\f312
dashicons-products
\f313
dashicons-awards
\f314
dashicons-forms
\f473
dashicons-testimonial
\f322
dashicons-portfolio
\f330
dashicons-book
\f331
dashicons-book-alt
\f316
dashicons-download
\f317
dashicons-upload
\f321
dashicons-backup
\f469
dashicons-clock
\f339
dashicons-lightbulb
\f482
dashicons-microphone
\f472
dashicons-desktop
\f547
dashicons-laptop
\f471
dashicons-tablet
\f470
dashicons-smartphone
\f525
dashicons-phone
\f510
dashicons-index-card
\f511
dashicons-carrot
\f512
dashicons-building
\f513
dashicons-store
\f514
dashicons-album
\f527
dashicons-palmtree
\f524
dashicons-tickets-alt
\f526
dashicons-money
\f328
dashicons-smiley
\f529
dashicons-thumbs-up
\f542
dashicons-thumbs-down
\f538
dashicons-layout
\f546
dashicons-paperclip
Dashicons
Официальный сайт

Файлы Dashicons:

Скачать Dashicons
DEMO