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"}

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

[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

\f333

dashicons-menu

\f319

dashicons-admin-site

\f226

dashicons-dashboard

\f109

dashicons-admin-post

\f104

dashicons-admin-media

\f103

dashicons-admin-links

\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

dashicons-format-gallery

\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

\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

dashicons-editor-unlink

\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

\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

dashicons-search

\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: