Масштабируемые векторные иконки

Размещайте масштабируемые векторные иконки, где угодно, используя иконочный шрифт.

Этот компонент использует иконочный шрифт Font Awesome, проект Дэйва Ганди (Dave Gandy). Иконочные шрифты хороши тем, что позволяют легко изменять цвет, размер и многое другое с помощью CSS. Это масштабируемая векторная графика, что означает, что они великолепно смотрятся на дисплеях с высоким разрешением.

Иконки. Применение

Чтобы использовать этот компонент, добавьте элементу <i> или <span> класс .uk-icon-*. На этом всё, у вас появится значок вектора, который наследует размер и цвет так же, как ваш текст. Превосходно, не правда ли?

Примеры

  • установлен class .uk-icon-home
  • установлен class .uk-icon-bug
  • установлен class .uk-icon-shopping-basket
  • Иконка в ссылке

Кнопка с иконкой

Разметка : иконка

<i class="uk-icon-check"></i>

Разметка : иконка в ссылке

<a href=""><i class="uk-icon-cubes"></i> ...</a>

Группа кнопок с иконками

В этом примере показана группа кнопок из компонента Button с иконкой внутри каждой кнопки.

Пример

Кнопка dropdown

В этом примере показана кнопка с использованием компонента Dropdown, которая разделена на стандартное действие слева, а выпадающий список - справа.

Пример

Масштабируем иконкочные значки

Если необходимо увеличить размер значков, то нужно применить класс .uk-icon-small, .uk-icon-medium или .uk-icon-large.

  • Размер по умолчанию.
  • ---- Здесь указан class .uk-icon-small.
  • --- Здесь добавлен class .uk-icon-medium.
  • -- Здесь добавлен class .uk-icon-large.

Разметка

<a href="" class="uk-icon-home uk-icon-small"></a>

Цитаты

В этом примере показана цитата из компонента Base с большим значком. В данном случае он дополнительно использует класс .uk-align-left из компонента Utility.

Пример

Тег <blockquote> предназначен для выделения длинных цитат внутри документа. Присутствуют отступы до и после элемента.

Разметка

<i class="uk-icon-quote-left uk-icon-large uk-align-left"></i>

Анимированные иконки

Используйте класс .uk-icon-spin для создания анимированных вращающихся иконок.

  • class="uk-icon-spinner uk-icon-spin" для загрузки контента ...
  • class="uk-icon-refresh uk-icon-spin" для обновления содержимого ...
  • class="uk-icon-circle-o-notch uk-icon-spin" ...
  • class="uk-icon-cog uk-icon-spin" ...

Иконки при наведении

Применяем стиль к элементу при наведении на него курсора мыши. Добавьте к ссылке класс-модификатор .uk-icon-hover, чтобы применить эффект наведения. Ссылки отображаются без подчеркивания.

Пример

Разметка

<a href="" class="uk-icon-hover uk-icon-star"></a>

Иконка кнопкой

Используйте класс-модификатор .uk-icon-button, чтобы создать креативную кнопку с необходимым значком внутри, которую можно использовать для социальных иконок.

Пример

Разметка

<a href="" class="uk-icon-button uk-icon-github"></a>

Выравниваем иконки

Чтобы установить фиксированную ширину иконке и отцентрировать её, добавьте класс .uk-icon-justify. Это может быть полезно при использовании иконок в списках.

Пример

  • Justified icon
  • Justified icon
  • Justified icon
  • Justified icon
  • Justified icon
  • Justified icon

Разметка

<a href="" class="uk-icon-justify uk-icon-github"></a>

Список векторных иконок

Карта доступных классов .uk-icon-* предоставляемых Font Awesome.

Новые иконки

  • bandcamp
  • bath
  • drivers-license
  • drivers-license-o
  • eercast
  • envelope-open
  • envelope-open-o
  • etsy
  • free-code-camp
  • grav
  • handshake-o
  • id-badge
  • id-card
  • id-card-o
  • imdb
  • linode
  • meetup
  • microchip
  • podcast
  • quora
  • ravelry
  • s15 (alias)
  • shower
  • snowflake-o
  • superpowers
  • telegram
  • thermometer
  • thermometer-0 (alias)
  • thermometer-1 (alias)
  • thermometer-2 (alias)
  • thermometer-3 (alias)
  • thermometer-4 (alias)
  • thermometer-empty
  • thermometer-full
  • thermometer-half
  • thermometer-quarter
  • thermometer-three-quarters
  • times-rectangle
  • times-rectangle-o (alias)
  • user-circle
  • user-circle-o
  • user-o
  • vcard
  • vcard-o (alias)
  • window-maximize
  • window-minimize
  • window-restore
  • wpexplorer

Web Application Icons

Список иконок Web Application.

Accessibility Icons

  • american-sign-language-interpreting
  • asl-interpreting (alias)
  • assistive-listening-systems
  • audio-description
  • blind
  • braille
  • cc
  • deaf
  • deafness (alias)
  • hard-of-hearing (alias)
  • low-vision
  • question-circle-o
  • sign-language
  • signing (alias)
  • tty
  • universal-access
  • volume-control-phone
  • wheelchair
  • wheelchair-alt

Hand Icons

  • hand-grab-o (alias)
  • hand-lizard-o
  • hand-o-down
  • hand-o-left
  • hand-o-right
  • hand-o-up
  • hand-paper-o
  • hand-peace-o
  • hand-pointer-o
  • hand-rock-o
  • hand-scissors-o
  • hand-spock-o
  • hand-stop-o (alias)
  • thumbs-down
  • thumbs-o-down
  • thumbs-o-up
  • thumbs-up

Transportation Icons

  • ambulance
  • automobile (alias)
  • bicycle
  • bus
  • cab (alias)
  • car
  • fighter-jet
  • motorcycle
  • plane
  • rocket
  • ship
  • space-shuttle
  • subway
  • taxi
  • train
  • truck
  • wheelchair
  • wheelchair-alt

Gender Icons

  • genderless (alias)
  • mars
  • mars-double
  • mars-stroke
  • mars-stroke-h
  • mars-stroke-v
  • mercury
  • neuter
  • transgender
  • transgender-alt
  • venus
  • venus-double
  • venus-mars

File Type Icons

  • file
  • file-archive-o
  • file-audio-o
  • file-code-o
  • file-excel-o
  • file-image-o
  • file-movie-o (alias)
  • file-o
  • file-pdf-o
  • file-photo-o (alias)
  • file-picture-o (alias)
  • file-powerpoint-o
  • file-sound-o (alias)
  • file-text
  • file-text-o
  • file-video-o
  • file-word-o
  • file-zip-o (alias)

Spinner Icons

  • circle-o-notch
  • cog
  • gear (alias)
  • refresh
  • spinner

Form Control Icons

  • check-square
  • check-square-o
  • circle
  • circle-o
  • dot-circle-o
  • minus-square
  • minus-square-o
  • plus-square
  • plus-square-o
  • square
  • square-o

Payment Icons

  • cc-amex
  • cc-diners-club
  • cc-discover
  • cc-jcb
  • cc-mastercard
  • cc-paypal
  • cc-stripe
  • cc-visa
  • credit-card
  • credit-card-alt
  • google-wallet
  • paypal

Currency Icons

  • bitcoin (alias)
  • btc
  • cny (alias)
  • dollar (alias)
  • eur
  • euro (alias)
  • gbp
  • ils
  • inr
  • jpy
  • krw
  • money
  • rmb (alias)
  • rouble (alias)
  • rub
  • ruble (alias)
  • rupee (alias)
  • shekel (alias)
  • sheqel (alias)
  • try
  • turkish-lira (alias)
  • usd
  • won (alias)
  • yen (alias)

Text Editor Icons

  • align-center
  • align-justify
  • align-left
  • align-right
  • bold
  • chain (alias)
  • chain-broken
  • clipboard
  • columns
  • copy (alias)
  • cut (alias)
  • dedent (alias)
  • eraser
  • file
  • file-o
  • file-text
  • file-text-o
  • files-o
  • floppy-o
  • font
  • header
  • indent
  • italic
  • link
  • list
  • list-alt
  • list-ol
  • list-ul
  • outdent
  • paperclip
  • paragraph
  • paste (alias)
  • repeat
  • rotate-left (alias)
  • rotate-right (alias)
  • save (alias)
  • scissors
  • strikethrough
  • subscript
  • superscript
  • table
  • text-height
  • text-width
  • th
  • th-large
  • th-list
  • underline
  • undo
  • unlink (alias)

Directional Icons

  • angle-double-down
  • angle-double-left
  • angle-double-right
  • angle-double-up
  • angle-down
  • angle-left
  • angle-right
  • angle-up
  • arrow-circle-down
  • arrow-circle-left
  • arrow-circle-o-down
  • arrow-circle-o-left
  • arrow-circle-o-right
  • arrow-circle-o-up
  • arrow-circle-right
  • arrow-circle-up
  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • arrows
  • arrows-alt
  • arrows-h
  • arrows-v
  • caret-down
  • caret-left
  • caret-right
  • caret-square-o-down
  • caret-square-o-left
  • caret-square-o-right
  • caret-square-o-up
  • caret-up
  • chevron-circle-down
  • chevron-circle-left
  • chevron-circle-right
  • chevron-circle-up
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • exchange
  • hand-o-down
  • hand-o-left
  • hand-o-right
  • hand-o-up
  • long-arrow-down
  • long-arrow-left
  • long-arrow-right
  • long-arrow-up
  • toggle-down (alias)
  • toggle-left (alias)
  • toggle-right (alias)
  • toggle-up (alias)

Video Player Icons

  • arrows-alt
  • backward
  • compress
  • eject
  • expand
  • fast-backward
  • fast-forward
  • forward
  • pause
  • pause-circle
  • pause-circle-o
  • play
  • play-circle
  • play-circle-o
  • random
  • step-backward
  • step-forward
  • stop
  • stop-circle
  • stop-circle-o
  • youtube-play

Brand Icons

Список иконок Brand.

Medical Icons

  • ambulance
  • h-square
  • hospital-o
  • medkit
  • plus-square
  • stethoscope
  • user-md
  • wheelchair