Компонент Иконка : Icon
Размещайте масштабируемые векторные иконки в любом месте вашего контента. Масштабируем любое изображение до размера иконки. Модификаторы. Руководство.
Коллекция UIkit 3 поставляется с собственной системой иконок SVG и обширной библиотекой, в которую входит большое количество красивых контурных иконочных значков. Этот компонент внедряет на сайт SVG, так что они наследуют цвет и могут быть стилизованы с помощью CSS.
Применение. Размещение
Обязательно включите скрипт библиотеки иконок.
Для получения более подробной информации см. инструкции по установке.
<script src="/js/uikit-icons.min.js"></script>
Чтобы применить компонент иконочных значков, добавьте к элементу <span>
или <a>
атрибут uk-icon
. Чтобы отобразить существующую иконку, вам нужно добавить к атрибуту опцию icon: NAME
.
И вуаля, у вас есть значок вектора, который наследует цвет так же, как ваш текст!
<span uk-icon="icon: check"></span>
<a href="" uk-icon="icon: heart"></a>
icon
это единственный параметр в значении атрибута, вы можете использовать uk-icon="NAME"
Примеры с единственным параметром в значении атрибута.
<span uk-icon="heart"></span>
Иконочная библиотека
Здесь представлен обзор доступных в настоящее время иконок фреймворка UIkit 3. Со временем будут добавляться новые иконки в данный список.
App
- ban
- bell
- bolt
- bookmark
- calendar
- camera
- cart
- check
- clock
- close
- code
- cog
- comment
- commenting
- comments
- credit-card
- future
- git-branch
- git-fork
- grid
- happy
- hashtag
- heart
- history
- home
- image
- info
- lifesaver
- link
- location
- lock
- list
- menu
- microphone
- minus
- minus-circle
- more
- more-vertical
- move
- nut
- paint-bucket
- pencil
- play
- play-circle
- plus
- plus-circle
- question
- receiver
- refresh
- rss
- search
- settings
- sign-in
- sign-out
- social
- star
- table
- tag
- thumbnails
- trash
- unlock
- user
- users
- video-camera
- warning
- world
Устройства. Девайсы
- tv
- desktop
- laptop
- tablet
- phone
- tablet-landscape
- phone-landscape
Место хранения
- file
- file-text
- file-pdf
- copy
- file-edit
- folder
- album
- push
- pull
- server
- database
- cloud-upload
- cloud-download
- download
- upload
Направления
- reply
- forward
- expand
- shrink
- arrow-up
- arrow-down
- arrow-left
- arrow-right
- chevron-up
- chevron-down
- chevron-left
- chevron-right
- chevron-double-left
- chevron-double-right
- triangle-up
- triangle-down
- triangle-left
- triangle-right
Редактор
- bold
- italic
- strikethrough
- quote-right
Бренды
- 500px
- behance
- dribbble
- etsy
- flickr
- foursquare
- github
- github-alt
- gitter
- google-plus
- joomla
- pagekit
- soundcloud
- tripadvisor
- tumblr
- uikit
- vimeo
- wordpress
- yelp
- youtube
Изменение размера иконки : Ratio
Изменить размер векторной иконки без потери качества очень просто. Добавьте к атрибуту uk-icon
параметр ratio: 2
, чтобы удвоить размер, или любое другое число, в зависимости от того, каким должен оказаться размер иконки. Ниже показаны примеры.
<span uk-icon="icon: check; ratio: 2"></span>
-
-
<span class="uk-margin-small-right" uk-icon="icon: happy; ratio: 2"></span> <span uk-icon="icon: happy; ratio: 3.5"></span>
Модификатор «Link»
При использовании иконки внутри якоря вы можете сбросить стиль ссылки по умолчанию на более приглушенный цвет, для этого добавьте класс .uk-icon-link
.
<a href="" class="uk-icon-link" uk-icon="heart"></a>
-
-
<div> <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="copy"></a> <a href="#" class="uk-icon-link uk-margin-small-right" uk-icon="file-edit"></a> <a href="#" class="uk-icon-link" uk-icon="trash"></a> </div>
Если вам понадобилось создать вертикальное иконочное меню (навигацию состоящую из иконок), обратите внимание на компонент UIkit 3 Иконочная навигация.
Модификатор «Button»
Чтобы создать из иконки кнопку, которую можно использовать для социальных иконок, установите элементу <a>
класс-модификатор .uk-icon-button
.
<a href="" class="uk-icon-button" uk-icon="twitter"></a>
-
-
<div> <a href="" class="uk-icon-button uk-text-primary uk-margin-small-right" uk-icon="twitter"></a> <a href="" class="uk-icon-button uk-text-success uk-margin-small-right" uk-icon="whatsapp"></a> <a href="" class="uk-icon-button uk-text-danger" uk-icon="youtube"></a> </div>
Для того чтобы использовать векторные значки в кнопке копонента Кнопка UIkit 3 достаточно указать всё по умолчанию, ничего лишнего не требуется.
-
-
<div class="uk-light uk-background-secondary uk-padding"> <button class="uk-button uk-button-default">Печать <span class="uk-margin-small-left" uk-icon="print"></span></button> </div>
Модификатор «Image»
Создание иконки из изображения. Вы также можете любое фоновое изображение масштабировать до размера иконки. Просто добавьте класс .uk-icon-image
и путь к фоновому изображению.
Пример. Иконка из картинки.
-
-
<span class="uk-icon uk-icon-image" style="background-image: url(/demo/img/dark.jpg);"></span>
Бонус. Иконки социальных сетей
Дополнительно иконки: vk, odnoklassniki, viber, telegram.
-
-
<ul class="as-social uk-grid-small uk-flex-middle" data-uk-grid> <li> <a class="as-icon-facebook uk-icon-button" href="#" data-uk-icon="icon: facebook" title="Facebook"></a> </li> <li> <a class="as-icon-youtube uk-icon-button" href="#" data-uk-icon="icon: youtube" title="YouTube"></a> </li> <li> <a class="as-icon-instagram uk-icon-button" href="#" data-uk-icon="icon: instagram" title="Instagram"></a> </li> <li> <a class="as-icon-twitter uk-icon-button" href="#" data-uk-icon="icon: twitter" title="Twitter"></a> </li> <li> <a class="as-icon-vk uk-icon uk-icon-button" href="#" title="ВКонтакте"> <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="vk"> <path d="M21.54736,7H18.25688a.74281.74281,0,0,0-.65452.39156s-1.31237,2.41693-1.73392,3.231C14.73438,12.8125,14,12.125,14,11.10863V7.60417A1.10417,1.10417,0,0,0,12.89583,6.5h-2.474a1.9818,1.9818,0,0,0-1.751.8125s1.25626-.20312,1.25626,1.48958c0,.41974.02162,1.62723.04132,2.64a.72943.72943,0,0,1-1.273.50431,21.54029,21.54029,0,0,1-2.4982-4.54359A.69314.69314,0,0,0,5.5668,7C4.8532,7,3.42522,7,2.57719,7a.508.508,0,0,0-.47969.68481C3.00529,10.17487,6.91576,18,11.37917,18h1.87865A.74219.74219,0,0,0,14,17.25781V16.12342a.7293.7293,0,0,1,1.22868-.5315l2.24861,2.1127A1.08911,1.08911,0,0,0,18.223,18h2.95281c1.42415,0,1.42415-.98824.64768-1.75294-.54645-.53817-2.51832-2.61663-2.51832-2.61663A1.01862,1.01862,0,0,1,19.2268,12.307c.63737-.83876,1.67988-2.21175,2.122-2.79993C21.95313,8.70313,23.04688,7,21.54736,7Z"></path> </svg> </a> </li> <li> <a class="as-icon-odnoklassniki uk-icon uk-icon-button" href="#" title="Одноклассники"> <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="odnoklassniki"> <path d="m12.030686,12.146098c2.617032,0 4.738255,-2.121548 4.738255,-4.738643c0,-2.61703 -2.121223,-4.738643 -4.738255,-4.738643c-2.61742,0 -4.738643,2.121613 -4.738643,4.738643c0,2.61703 2.121223,4.738643 4.738643,4.738643zm0,-7.069845c1.287235,0 2.331205,1.043574 2.331205,2.331202c0,1.287628 -1.04397,2.331203 -2.331205,2.331203c-1.287628,0 -2.331592,-1.043575 -2.331592,-2.331203c0,-1.287628 1.043964,-2.331202 2.331592,-2.331202z"></path> <path d="m15.49965,12.515539c-1.331227,1.048992 -3.468964,1.048992 -3.468964,1.048992c0,0 -2.138188,0 -3.469224,-1.048992c-0.984829,-0.775827 -1.725739,-0.328972 -1.993223,0.208807c-0.466369,0.936789 0.060443,1.389713 1.249836,2.153009c1.015895,0.652266 2.411484,0.895928 3.312705,0.986918l-0.752527,0.752394c-1.05976,1.05937 -2.082579,2.082449 -2.792156,2.792156c-0.424403,0.42414 -0.424403,1.112567 0,1.536642l0.128,0.127934c0.42453,0.424401 1.112435,0.424401 1.536572,0l2.79255,-2.792091c1.05976,1.059697 2.082579,2.082515 2.792156,2.792091c0.424403,0.424401 1.112308,0.424401 1.536839,0l0.128,-0.127934c0.424137,-0.424727 0.424137,-1.112502 0,-1.536642l-2.792746,-2.792548l-0.754611,-0.754614c0.902066,-0.092686 2.2829,-0.337458 3.289985,-0.984372c1.189202,-0.763295 1.716338,-1.21622 1.249836,-2.153009c-0.267351,-0.537648 -1.008718,-0.984569 -1.993026,-0.208741z"></path> </svg> </a> </li> <li> <a class="as-icon-whatsapp uk-icon-button" href="https://wa.me/0123456789" target="_blank" rel="nofollow" data-uk-icon="icon: whatsapp" title="WhatsApp"></a> </li> <li> <a class="as-icon-viber uk-icon uk-icon-button" href="viber://chat?number=%2B90123456789" target="_blank" rel="nofollow" title="Viber"> <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="viber"> <path d="m14.110407,7.291783c0.574696,0.122457 1.015173,0.340851 1.391539,0.693232c0.484294,0.457313 0.749734,1.010792 0.866425,1.805957c0.078871,0.518425 0.046585,0.72229 -0.137216,0.891332c-0.17204,0.15728 -0.49006,0.163046 -0.682625,0.014529c-0.139984,-0.104931 -0.183801,-0.215626 -0.215857,-0.515658c-0.037821,-0.399197 -0.107928,-0.678704 -0.227618,-0.937917c-0.256676,-0.550481 -0.708914,-0.835984 -1.473177,-0.929153c-0.358839,-0.043817 -0.466767,-0.084406 -0.583459,-0.221392c-0.21309,-0.253447 -0.131221,-0.664175 0.163276,-0.81569c0.110927,-0.055348 0.157511,-0.061113 0.402656,-0.046584c0.151976,0.008763 0.376597,0.035053 0.496056,0.061344zm-0.621281,-2.199388c1.770903,0.259212 3.141917,1.080668 4.040629,2.414783c0.504819,0.751579 0.819841,1.634148 0.92777,2.580828c0.037821,0.346616 0.037821,0.978735 -0.002998,1.083666c-0.038052,0.098934 -0.160509,0.232922 -0.26544,0.28827c-0.113694,0.058346 -0.355841,0.05235 -0.490059,-0.017527c-0.224621,-0.113693 -0.29173,-0.294266 -0.29173,-0.783634c0,-0.754346 -0.195563,-1.549742 -0.533877,-2.167332c-0.385129,-0.704994 -0.945296,-1.287531 -1.627921,-1.692493c-0.586457,-0.349615 -1.452882,-0.608828 -2.243435,-0.672939c-0.285964,-0.023292 -0.443475,-0.081638 -0.551404,-0.206863c-0.166274,-0.189336 -0.183801,-0.445781 -0.043817,-0.658409c0.151515,-0.235229 0.384899,-0.273281 1.082282,-0.16835zm-6.870521,-1.797193c0.102163,0.035053 0.259674,0.116461 0.350075,0.174807c0.554171,0.367141 2.097456,2.339141 2.602275,3.323642c0.288732,0.562243 0.385129,0.978736 0.294728,1.287531c-0.0934,0.332088 -0.247913,0.506895 -0.939531,1.063142c-0.277201,0.224159 -0.536875,0.454314 -0.577694,0.515658c-0.104931,0.151515 -0.189567,0.448549 -0.189567,0.658409c0.002998,0.48637 0.31802,1.36917 0.732207,2.047873c0.320787,0.527189 0.895483,1.202895 1.464414,1.721551c0.668095,0.611825 1.25732,1.028319 1.922648,1.357408c0.854895,0.425257 1.37701,0.532954 1.759142,0.35538c0.096167,-0.043817 0.19833,-0.101933 0.230385,-0.128223c0.029058,-0.02629 0.253909,-0.300032 0.498823,-0.603062c0.472533,-0.594298 0.580462,-0.690465 0.904478,-0.801161c0.411419,-0.139753 0.831371,-0.101932 1.254552,0.113694c0.321018,0.166044 1.02117,0.600064 1.473178,0.914625c0.59522,0.416493 1.867069,1.453574 2.03934,1.660437c0.30326,0.372907 0.355841,0.850513 0.151745,1.377933c-0.215857,0.556246 -1.055992,1.599093 -1.642449,2.044875c-0.530879,0.401964 -0.907245,0.556246 -1.403301,0.579539c-0.408421,0.020294 -0.577693,-0.014529 -1.099809,-0.230156c-4.095746,-1.686497 -6.968389,-3.464577 -9.564898,-6.922438c-1.356485,-1.805956 -2.787143,-4.417658 -3.49306,-6.360601c-0.411419,-1.133018 -0.431714,-1.625384 -0.093399,-2.205153c0.14598,-0.244684 0.76726,-0.850513 1.219499,-1.188366c0.752732,-0.559245 1.099809,-0.766108 1.37701,-0.824454c0.189567,-0.040819 0.519348,-0.008763 0.729209,0.06711zm6.669193,-0.314561c1.003643,0.125225 1.81449,0.366911 2.704438,0.801161c0.875189,0.428255 1.435356,0.833217 2.176326,1.570036c0.694386,0.696231 1.079516,1.22342 1.487937,2.041877c0.568931,1.141782 0.892716,2.49942 0.948064,3.993583c0.020525,0.509662 0.005765,0.623356 -0.110927,0.769106c-0.221622,0.282505 -0.708914,0.23592 -0.875189,-0.081639c-0.05258,-0.10493 -0.067109,-0.195101 -0.084636,-0.603061c-0.029288,-0.626354 -0.072875,-1.031086 -0.160509,-1.514688c-0.34431,-1.896359 -1.254553,-3.411047 -2.707436,-4.497711c-1.210735,-0.908859 -2.46229,-1.351642 -4.101742,-1.447809c-0.554401,-0.032056 -0.650568,-0.05235 -0.776024,-0.148517c-0.233383,-0.183571 -0.245145,-0.614592 -0.020524,-0.81569c0.137216,-0.125225 0.233383,-0.142751 0.708914,-0.128223c0.248374,0.008994 0.612978,0.038283 0.811308,0.061575z"></path> </svg> </a> </li> <li> <a class="as-icon-telegram uk-icon uk-icon-button" href="#" target="_blank" rel="nofollow" title="Telegram"> <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-svg="telegram"> <path d="m21.005697,5.550602l-2.74611,12.950637c-0.207176,0.914021 -0.74748,1.141452 -1.515294,0.710964l-4.184146,-3.083356l-2.018885,1.941824c-0.223392,0.223392 -0.775524,0.536686 -0.751124,-0.033221l0.21082,-3.817906l7.754913,-7.007478c0.337166,-0.300579 -0.073103,-0.467156 -0.524051,-0.16655l-9.586957,6.036571l-4.127295,-1.291786c-0.897769,-0.280315 -0.913985,-0.897805 0.186841,-1.328373l16.143532,-6.219364c0.747399,-0.280279 1.401485,0.166506 1.157757,1.308038z"></path> </svg> </a> </li> </ul> <style> .as-social [class*=as-icon-]{color:#fff;background-color:#1e87f0;border-radius:50%;transition-property:border-radius,background-color;} .as-icon-facebook:hover{background-color:#3B5999} .as-icon-youtube:hover{background-color:#FF0000} .as-icon-instagram:hover{background-color:#DB307F} .as-icon-twitter:hover{background-color:#3FACE2} .as-icon-vk:hover{background-color:#5181B8} .as-icon-odnoklassniki:hover{background-color:#F58220} .as-icon-whatsapp:hover{background-color:#3EE25B} .as-icon-viber:hover{background-color:#7B519D} .as-icon-telegram:hover{background-color:#24A1DE} [class*=as-icon-]:hover{color:#fff;border-radius:6px} </style>
Опции компонента
При использовании компонента Icon к атрибуту можно применить любой из этих параметров. Разделяйте несколько вариантов точкой с запятой. Для получения дополнительной информации ознакомьтесь с главой Конфигурация компонента.
Опция | Значение | По умолчанию | Описание |
---|---|---|---|
icon |
String | '' |
Иконка для отображения. |
ratio |
Number | 1 |
Размер иконки. |
icon
является Primary опцией.
Если icon
это единственный параметр в значении атрибута, то её ключ можно не использовать.
<span uk-icon="heart"></span>
JavaScript
Узнайте больше о использовании JavaScript в компонентах фреймворка UIkit 3.
Инициализация
UIkit.icon(element, options);
Properties
svg
A JavaScript Promise that will resolve with the added SVG Node.
UIkit.icon(element).svg.then(function(svg) { svg.querySelector('path').style.stroke = 'red'; })