Иконки

Иконки позволяют обогатить контент символами, которые сделают восприятие более легким и понятным. В SIMAI Framework используются иконки Font Awesome, у которых можно мгновенно настроить: размер, цвет, тень и все то, что можно сделать с помощью модификаторов.

Базовые иконки

Вы можете размещать иконки практически в любом месте, используя префикс CSS fa и имя значка. Шрифт Awesome предназначен для использования со встроенными элементами. Можно использовать тег <i> для краткости, но использование <span> семантически корректнее.

fa-heart
<i class="fa fa-heart" aria-hidden="true"></i> fa-heart

Изменение размера

Чтобы увеличить размеры значков относительно их контейнера, используйте классы fa-lg (33%), fa-2x ... fa-10x.

fa-lg fa-2x fa-3x fa-4x fa-5x fa-6x fa-7x fa-8x fa-9x fa-10x
<i class="fa fa-heart fa-lg" aria-hidden="true"></i> fa-lg
<i class="fa fa-heart fa-2x" aria-hidden="true"></i> fa-2x
<i class="fa fa-heart fa-3x" aria-hidden="true"></i> fa-3x
<i class="fa fa-heart fa-4x" aria-hidden="true"></i> fa-4x
<i class="fa fa-heart fa-5x" aria-hidden="true"></i> fa-5x
<i class="fa fa-heart fa-6x" aria-hidden="true"></i> fa-6x
<i class="fa fa-heart fa-7x" aria-hidden="true"></i> fa-7x
<i class="fa fa-heart fa-8x" aria-hidden="true"></i> fa-8x
<i class="fa fa-heart fa-9x" aria-hidden="true"></i> fa-9x
<i class="fa fa-heart fa-10x" aria-hidden="true"></i> fa-10x

При изменении размера иконок в рамках SIMAI Framework мы рекомендуем использовать модификаторы размера текста t--2 ... t-7. Это позволит правильно соотносить размер иконок с размером текста.

t--2 t--1 t-0 t-1 t-2 t-3 t-4 t-5 t-6 t-7
<i class="fa fa-heart t--2" aria-hidden="true"></i> t--2
<i class="fa fa-heart t--1" aria-hidden="true"></i> t--1
<i class="fa fa-heart t-0" aria-hidden="true"></i> t-0
<i class="fa fa-heart t-1" aria-hidden="true"></i> t-1
<i class="fa fa-heart t-2" aria-hidden="true"></i> t-2
<i class="fa fa-heart t-3" aria-hidden="true"></i> t-3
<i class="fa fa-heart t-4" aria-hidden="true"></i> t-4
<i class="fa fa-heart t-5" aria-hidden="true"></i> t-5
<i class="fa fa-heart t-6" aria-hidden="true"></i> t-6
<i class="fa fa-heart t-7" aria-hidden="true"></i> t-7

Цвет иконок

Вы можете использовать цветовые модификаторы для указания цвета иконки.

c-red
c-red-900
c-red-a700
c-primary
<i class="fa fa-heart c-red" aria-hidden="true"></i> c-red
<i class="fa fa-heart c-red-900" aria-hidden="true"></i> c-red-900
<i class="fa fa-heart c-red-a700" aria-hidden="true"></i> c-red-a700
<i class="fa fa-heart c-primary" aria-hidden="true"></i> c-primary

Наследование свойств

При размещение в тексте, иконки наследуют от текста такие параметры как размер и цвет.

это большое красное сердце

<p class="c-red t-3"><i class="fa fa-heart" aria-hidden="true"></i> это большое красное сердце</p>

Иконки с фиксированной шириной

Используйте fa-fw для установки значков с фиксированной шириной. Отлично подходит для использования, когда различные значки ширины сбросили выравнивание. Особенно полезен в таких вещах, как навигационные списки и группы списков.

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>  Home</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>  Library</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>  Applications</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>  Settings</a>
</div>

Список иконок

Используйте классы fa-ul и fa-li, чтобы легко заменить маркеры по умолчанию в неупорядоченных списках.

  • List icons
  • can be used
  • as bullets
  • in lists
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

Иконки

Ниже перечислены доступные иконки. Для копирования иконки просто кликните на изображение иконки. Код иконки при этом будет скопирован в буфер обмена.

fa-accessible-icon

fa-accusoft

fa-address-book

fa-address-card

fa-adjust

fa-adn

fa-adversal

fa-affiliatetheme

fa-alarm-clock

fa-algolia

fa-align-center

fa-align-justify

fa-align-left

fa-align-right

fa-amazon

fa-ambulance

fa-american-sign-language-interpreting

fa-amilia

fa-anchor

fa-android

fa-angellist

fa-angle-double-down

fa-angle-double-left

fa-angle-double-right

fa-angle-double-up

fa-angle-down

fa-angle-left

fa-angle-right

fa-angle-up

fa-angrycreative

fa-app-store

fa-app-store-ios

fa-apper

fa-apple

fa-apple-pay

fa-archive

fa-arrow-alt-circle-down

fa-arrow-alt-circle-left

fa-arrow-alt-circle-right

fa-arrow-alt-circle-up

fa-arrow-alt-down

fa-arrow-alt-from-bottom

fa-arrow-alt-from-left

fa-arrow-alt-from-right

fa-arrow-alt-from-top

fa-arrow-alt-left

fa-arrow-alt-right

fa-arrow-alt-square-down

fa-arrow-alt-square-left

fa-arrow-alt-square-right

fa-arrow-alt-square-up

fa-arrow-alt-to-bottom

fa-arrow-alt-to-left

fa-arrow-alt-to-right

fa-arrow-alt-to-top

fa-arrow-alt-up

fa-arrow-circle-down

fa-arrow-circle-left

fa-arrow-circle-right

fa-arrow-circle-up

fa-arrow-down

fa-arrow-from-bottom

fa-arrow-from-left

fa-arrow-from-right

fa-arrow-from-top

fa-arrow-left

fa-arrow-right

fa-arrow-square-down

fa-arrow-square-left

fa-arrow-square-right

fa-arrow-square-up

fa-arrow-to-bottom

fa-arrow-to-left

fa-arrow-to-right

fa-arrow-to-top

fa-arrow-up

fa-arrows

fa-arrows-alt

fa-arrows-alt-h

fa-arrows-alt-v

fa-arrows-h

fa-arrows-v

fa-assistive-listening-systems

fa-asterisk

fa-asymmetrik

fa-audible

fa-audio-description

fa-autoprefixer

fa-avianex

fa-aws

fa-backward

fa-badge

fa-badge-check

fa-balance-scale

fa-ban

fa-bandcamp

fa-barcode

fa-bars

fa-bath

fa-battery-bolt

fa-battery-empty

fa-battery-full

fa-battery-half

fa-battery-quarter

fa-battery-slash

fa-battery-three-quarters

fa-bed

fa-beer

fa-behance

fa-behance-square

fa-bell

fa-bell-slash

fa-bicycle

fa-bimobject

fa-binoculars

fa-birthday-cake

fa-bitbucket

fa-bitcoin

fa-bity

fa-black-tie

fa-blackberry

fa-blind

fa-blogger

fa-blogger-b

fa-bluetooth

fa-bluetooth-b

fa-bold

fa-bolt

fa-bomb

fa-book

fa-bookmark

fa-braille

fa-briefcase

fa-browser

fa-btc

fa-bug

fa-building

fa-bullhorn

fa-bullseye

fa-buromobelexperte

fa-bus

fa-buysellads

fa-calculator

fa-calendar

fa-calendar-alt

fa-calendar-check

fa-calendar-edit

fa-calendar-exclamation

fa-calendar-minus

fa-calendar-plus

fa-calendar-times

fa-camera

fa-camera-alt

fa-camera-retro

fa-car

fa-caret-circle-down

fa-caret-circle-left

fa-caret-circle-right

fa-caret-circle-up

fa-caret-down

fa-caret-left

fa-caret-right

fa-caret-square-down

fa-caret-square-left

fa-caret-square-right

fa-caret-square-up

fa-caret-up

fa-cart-arrow-down

fa-cart-plus

fa-cc-amex

fa-cc-apple-pay

fa-cc-diners-club

fa-cc-discover

fa-cc-jcb

fa-cc-mastercard

fa-cc-paypal

fa-cc-stripe

fa-cc-visa

fa-centercode

fa-certificate

fa-chart-area

fa-chart-bar

fa-chart-line

fa-chart-pie

fa-check

fa-check-circle

fa-check-square

fa-chevron-circle-down

fa-chevron-circle-left

fa-chevron-circle-right

fa-chevron-circle-up

fa-chevron-double-down

fa-chevron-double-left

fa-chevron-double-right

fa-chevron-double-up

fa-chevron-down

fa-chevron-left

fa-chevron-right

fa-chevron-square-down

fa-chevron-square-left

fa-chevron-square-right

fa-chevron-square-up

fa-chevron-up

fa-child

fa-chrome

fa-circle

fa-circle-notch

fa-clipboard

fa-clock

fa-clone

fa-closed-captioning

fa-cloud

fa-cloud-download

fa-cloud-download-alt

fa-cloud-upload

fa-cloud-upload-alt

fa-cloudscale

fa-cloudsmith

fa-cloudversify

fa-club

fa-code

fa-code-branch

fa-code-commit

fa-code-merge

fa-codepen

fa-codiepie

fa-coffee

fa-cog

fa-cogs

fa-columns

fa-comment

fa-comment-alt

fa-comments

fa-compass

fa-compress

fa-compress-wide

fa-connectdevelop

fa-contao

fa-copy

fa-copyright

fa-cpanel

fa-creative-commons

fa-credit-card

fa-credit-card-blank

fa-credit-card-front

fa-crop

fa-crosshairs

fa-css3

fa-css3-alt

fa-cube

fa-cubes

fa-cut

fa-cuttlefish

fa-d-and-d

fa-dashcube

fa-database

fa-deaf

fa-delicious

fa-deploydog

fa-deskpro

fa-desktop

fa-desktop-alt

fa-deviantart

fa-diamond

fa-digg

fa-digital-ocean

fa-discord

fa-discourse

fa-dochub

fa-docker

fa-dollar-sign

fa-dot-circle

fa-download

fa-draft2digital

fa-dribbble

fa-dribbble-square

fa-dropbox

fa-dropbox-alt

fa-drupal

fa-dyalog

fa-earlybirds

fa-edge

fa-edit

fa-eject

fa-ellipsis-h

fa-ellipsis-h-alt

fa-ellipsis-v

fa-ellipsis-v-alt

fa-empire

fa-envelope

fa-envelope-open

fa-envelope-square

fa-envira

fa-eraser

fa-erlang

fa-etsy

fa-euro-sign

fa-exchange

fa-exchange-alt

fa-exclamation

fa-exclamation-circle

fa-exclamation-square

fa-exclamation-triangle

fa-expand

fa-expand-arrows

fa-expand-arrows-alt

fa-expand-wide

fa-expeditedssl

fa-external-link

fa-external-link-alt

fa-external-link-square

fa-external-link-square-alt

fa-eye

fa-eye-dropper

fa-eye-slash

fa-facebook

fa-facebook-f

fa-facebook-messenger

fa-facebook-square

fa-fast-backward

fa-fast-forward

fa-fax

fa-female

fa-fighter-jet

fa-file

fa-file-alt

fa-file-archive

fa-file-audio

fa-file-check

fa-file-code

fa-file-edit

fa-file-excel

fa-file-exclamation

fa-file-image

fa-file-minus

fa-file-pdf

fa-file-plus

fa-file-powerpoint

fa-file-times

fa-file-video

fa-file-word

fa-film

fa-film-alt

fa-filter

fa-fire

fa-fire-extinguisher

fa-firefox

fa-first-order

fa-firstdraft

fa-flag

fa-flag-checkered

fa-flask

fa-flickr

fa-fly

fa-folder

fa-folder-open

fa-font

fa-font-awesome

fa-font-awesome-alt

fa-fonticons

fa-fonticons-fi

fa-fort-awesome

fa-fort-awesome-alt

fa-forumbee

fa-forward

fa-foursquare

fa-free-code-camp

fa-freebsd

fa-frown

fa-futbol

fa-gamepad

fa-gavel

fa-gem

fa-genderless

fa-get-pocket

fa-gg-circle

fa-gift

fa-git

fa-git-square

fa-github

fa-github-alt

fa-github-square

fa-gitkraken

fa-gitlab

fa-glass-martini

fa-glide

fa-glide-g

fa-globe

fa-gofore

fa-goodreads

fa-goodreads-g

fa-google

fa-google-drive

fa-google-play

fa-google-plus

fa-google-plus-g

fa-google-plus-square

fa-google-wallet

fa-graduation-cap

fa-gratipay

fa-grav

fa-gripfire

fa-grunt

fa-gulp

fa-h-square

fa-hacker-news

fa-hacker-news-square

fa-hand-lizard

fa-hand-paper

fa-hand-peace

fa-hand-point-down

fa-hand-point-left

fa-hand-point-right

fa-hand-point-up

fa-hand-pointer

fa-hand-rock

fa-hand-scissors

fa-hand-spock

fa-handshake

fa-hashtag

fa-hdd

fa-heading

fa-headphones

fa-heart

fa-heartbeat

fa-hexagon

fa-hire-a-helper

fa-history

fa-home

fa-hospital

fa-hotjar

fa-hourglass

fa-hourglass-end

fa-hourglass-half

fa-hourglass-start

fa-houzz

fa-html5

fa-hubspot

fa-i-cursor

fa-id-badge

fa-id-card

fa-image

fa-images

fa-imdb

fa-inbox

fa-inbox-in

fa-inbox-out

fa-indent

fa-industry

fa-industry-alt

fa-info

fa-info-circle

fa-info-square

fa-instagram

fa-internet-explorer

fa-ioxhost

fa-italic

fa-itunes

fa-itunes-note

fa-jack-o-lantern

fa-jenkins

fa-joget

fa-joomla

fa-js-square

fa-jsfiddle

fa-key

fa-keyboard

fa-keycdn

fa-kickstarter

fa-kickstarter-k

fa-language

fa-laptop

fa-laravel

fa-lastfm

fa-lastfm-square

fa-leaf

fa-leanpub

fa-lemon

fa-less

fa-level-down

fa-level-down-alt

fa-level-up

fa-level-up-alt

fa-life-ring

fa-lightbulb

fa-line

fa-link

fa-linkedin

fa-linkedin-in

fa-linode

fa-linux

fa-lira-sign

fa-list

fa-list-alt

fa-list-ol

fa-list-ul

fa-location-arrow

fa-lock

fa-lock-alt

fa-lock-open

fa-lock-open-alt

fa-long-arrow-alt-down

fa-long-arrow-alt-left

fa-long-arrow-alt-right

fa-long-arrow-alt-up

fa-long-arrow-down

fa-long-arrow-left

fa-long-arrow-right

fa-long-arrow-up

fa-low-vision

fa-lyft

fa-magento

fa-magic

fa-magnet

fa-male

fa-map

fa-map-marker

fa-map-marker-alt

fa-map-pin

fa-map-signs

fa-mars

fa-mars-double

fa-mars-stroke

fa-mars-stroke-h

fa-mars-stroke-v

fa-maxcdn

fa-medapps

fa-medium

fa-medium-m

fa-medkit

fa-medrt

fa-meetup

fa-meh

fa-mercury

fa-microchip

fa-microphone

fa-microphone-alt

fa-microphone-slash

fa-microsoft

fa-minus

fa-minus-circle

fa-minus-hexagon

fa-minus-octagon

fa-minus-square

fa-mix

fa-mixcloud

fa-mizuni

fa-mobile

fa-mobile-alt

fa-mobile-android

fa-mobile-android-alt

fa-modx

fa-monero

fa-money-bill

fa-money-bill-alt

fa-moon

fa-motorcycle

fa-mouse-pointer

fa-music

fa-napster

fa-neuter

fa-newspaper

fa-nintendo-switch

fa-node

fa-node-js

fa-npm

fa-ns8

fa-nutritionix

fa-object-group

fa-object-ungroup

fa-octagon

fa-odnoklassniki

fa-odnoklassniki-square

fa-opencart

fa-openid

fa-opera

fa-optin-monster

fa-osi

fa-outdent

fa-page4

fa-pagelines

fa-paint-brush

fa-palfed

fa-paper-plane

fa-paperclip

fa-paragraph

fa-paste

fa-patreon

fa-pause

fa-pause-circle

fa-paw

fa-paypal

fa-pen

fa-pen-alt

fa-pen-square

fa-pencil

fa-pencil-alt

fa-percent

fa-periscope

fa-phabricator

fa-phoenix-framework

fa-phone

fa-phone-slash

fa-phone-square

fa-phone-volume

fa-pied-piper

fa-pied-piper-alt

fa-pied-piper-pp

fa-pinterest

fa-pinterest-p

fa-pinterest-square

fa-plane

fa-plane-alt

fa-play

fa-play-circle

fa-playstation

fa-plug

fa-plus

fa-plus-circle

fa-plus-hexagon

fa-plus-octagon

fa-plus-square

fa-podcast

fa-poo

fa-portrait

fa-pound-sign

fa-power-off

fa-print

fa-product-hunt

fa-pushed

fa-puzzle-piece

fa-python

fa-qrcode

fa-question

fa-question-circle

fa-question-square

fa-quora

fa-quote-left

fa-quote-right

fa-random

fa-ravelry

fa-react

fa-rebel

fa-rectangle-landscape

fa-rectangle-portrait

fa-rectangle-wide

fa-recycle

fa-red-river

fa-reddit

fa-reddit-alien

fa-reddit-square

fa-redo

fa-redo-alt

fa-registered

fa-rendact

fa-renren

fa-repeat

fa-repeat-1

fa-repeat-1-alt

fa-repeat-alt

fa-reply

fa-reply-all

fa-replyd

fa-resolving

fa-retweet

fa-retweet-alt

fa-road

fa-rocket

fa-rocketchat

fa-rockrms

fa-rss

fa-rss-square

fa-ruble-sign

fa-rupee-sign

fa-safari

fa-sass

fa-save

fa-schlix

fa-scribd

fa-scrubber

fa-search

fa-search-minus

fa-search-plus

fa-searchengin

fa-sellcast

fa-sellsy

fa-server

fa-servicestack

fa-share

fa-share-all

fa-share-alt

fa-share-alt-square

fa-share-square

fa-shekel-sign

fa-shield

fa-shield-alt

fa-shield-check

fa-ship

fa-shirtsinbulk

fa-shopping-bag

fa-shopping-basket

fa-shopping-cart

fa-shower

fa-sign-in

fa-sign-in-alt

fa-sign-language

fa-sign-out

fa-sign-out-alt

fa-signal

fa-simplybuilt

fa-sistrix

fa-sitemap

fa-skyatlas

fa-skype

fa-slack

fa-slack-hash

fa-sliders-h

fa-sliders-h-square

fa-sliders-v

fa-sliders-v-square

fa-slideshare

fa-smile

fa-snapchat

fa-snapchat-ghost

fa-snapchat-square

fa-snowflake

fa-sort

fa-sort-alpha-down

fa-sort-alpha-up

fa-sort-amount-down

fa-sort-amount-up

fa-sort-down

fa-sort-numeric-down

fa-sort-numeric-up

fa-sort-up

fa-soundcloud

fa-space-shuttle

fa-spade

fa-speakap

fa-spinner

fa-spinner-third

fa-spotify

fa-square

fa-stack-exchange

fa-stack-overflow

fa-star

fa-star-exclamation

fa-star-half

fa-staylinked

fa-steam

fa-steam-square

fa-steam-symbol

fa-step-backward

fa-step-forward

fa-stethoscope

fa-sticker-mule

fa-sticky-note

fa-stop

fa-stop-circle

fa-stopwatch

fa-street-view

fa-strikethrough

fa-studiovinari

fa-stumbleupon

fa-stumbleupon-circle

fa-subscript

fa-subway

fa-suitcase

fa-sun

fa-superpowers

fa-superscript

fa-supple

fa-sync

fa-sync-alt

fa-table

fa-tablet

fa-tablet-alt

fa-tablet-android

fa-tablet-android-alt

fa-tachometer

fa-tachometer-alt

fa-tag

fa-tags

fa-tasks

fa-taxi

fa-telegram

fa-telegram-plane

fa-tencent-weibo

fa-terminal

fa-text-height

fa-text-width

fa-th-large

fa-th-list

fa-themeisle

fa-thermometer-empty

fa-thermometer-full

fa-thermometer-half

fa-thermometer-quarter

fa-thermometer-three-quarters

fa-thumbs-down

fa-thumbs-up

fa-thumbtack

fa-ticket

fa-ticket-alt

fa-times

fa-times-circle

fa-times-hexagon

fa-times-octagon

fa-times-square

fa-tint

fa-toggle-off

fa-toggle-on

fa-trademark

fa-train

fa-transgender

fa-transgender-alt

fa-trash

fa-trash-alt

fa-tree

fa-tree-alt

fa-trello

fa-triangle

fa-tripadvisor

fa-trophy

fa-trophy-alt

fa-truck

fa-tty

fa-tumblr

fa-tumblr-square

fa-tv-retro

fa-twitch

fa-twitter

fa-twitter-square

fa-uber

fa-uikit

fa-umbrella

fa-underline

fa-undo

fa-undo-alt

fa-uniregistry

fa-universal-access

fa-university

fa-unlink

fa-unlock

fa-unlock-alt

fa-untappd

fa-upload

fa-usb

fa-usd-circle

fa-usd-square

fa-user

fa-user-alt

fa-user-circle

fa-user-md

fa-user-plus

fa-user-secret

fa-user-times

fa-users

fa-ussunnah

fa-utensil-fork

fa-utensil-knife

fa-utensil-spoon

fa-utensils

fa-utensils-alt

fa-vaadin

fa-venus

fa-venus-double

fa-venus-mars

fa-viacoin

fa-viadeo

fa-viadeo-square

fa-viber

fa-video

fa-vimeo

fa-vimeo-square

fa-vimeo-v

fa-vine

fa-vnv

fa-volume-down

fa-volume-mute

fa-volume-off

fa-volume-up

fa-vuejs

fa-watch

fa-weibo

fa-weixin

fa-whatsapp

fa-whatsapp-square

fa-wheelchair

fa-whmcs

fa-wifi

fa-wikipedia-w

fa-window

fa-window-alt

fa-window-close

fa-window-maximize

fa-window-minimize

fa-window-restore

fa-windows

fa-won-sign

fa-wordpress

fa-wordpress-simple

fa-wpbeginner

fa-wpexplorer

fa-wpforms

fa-wrench

fa-xbox

fa-xing

fa-xing-square

fa-y-combinator

fa-yahoo

fa-yandex

fa-yandex-international

fa-yelp

fa-yen-sign

fa-yoast

fa-youtube