- Html css javascript иконки
- Available in
- Features
- Icons Tutorial
- Font Awesome 5 Icons
- Example
- Font Awesome 4 Icons
- Example
- Bootstrap 3 Icons
- Example
- Google Icons
- Example
- Icons Tutorial
- Font Awesome 5 Icons
- Example
- Font Awesome 4 Icons
- Example
- Bootstrap 3 Icons
- Example
- Google Icons
- Example
- 27 CSS Icons and Icon Sets
- Related Articles
- Table of Contents
- Icon Sets
- Author
- Links
- About a code
- Tabler Icons
- Author
- Links
- About a code
- css.gg
- Author
- Links
- About a code
- Unicons
- Author
- Links
- About a code
- icons.css
- Author
- Links
- About a code
- Font Awesome
- Author
- Links
- About a code
- iConicss
- Author
- Links
- About a code
- Gov Icons
- Author
- Варианты установки SVG иконки
- Установка графическим файлом
- Установка в HTML
- Установка через CSS
- Установка через JS
- Смотрите также:
Html css javascript иконки
Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API
Version: v2.0 — Total weight: 316kb
| 1 | .gg-vinyl |
| 2 | box-sizing: border-box; |
| 3 | position: relative; |
| 4 | display: block; |
| 5 | transform: scale(var(—ggs, 1 )); |
| 6 | width: 8px ; |
| 7 | height: 8px ; |
| 8 | border: 3px solid transparent; |
| 9 | box-shadow: 0 0 0 6px ,inset 0 0 0 2px ; |
| 10 | border-radius: 22px |
| 11 | > |
| 1 | .gg-pokemon |
| 2 | box-sizing: border-box; |
| 3 | position: relative; |
| 4 | display: block; |
| 5 | transform: scale(var(—ggs, 1 )); |
| 6 | width: 18px ; |
| 7 | height: 18px ; |
| 8 | border: 5px solid transparent; |
| 9 | box-shadow: |
| 10 | 0 0 0 2px , |
| 11 | inset 0 0 0 2px ; |
| 12 | border-radius: 100% |
| 13 | > |
| 14 | |
| 15 | .gg-pokemon ::before |
| 16 | content: «»; |
| 17 | display: block; |
| 18 | box-sizing: border-box; |
| 19 | position: absolute; |
| 20 | width: 20px ; |
| 21 | height: 2px ; |
| 22 | border-left: 8px solid; |
| 23 | border-right: 8px solid; |
| 24 | left: -6px ; |
| 25 | top: 3px |
| 26 | > |
Available in
Features
700 Precise and Detailed UI Icons — provided with well-organized Figma components library.
Icons Tutorial
To insert an icon, add the name of the icon class to any inline HTML element.
The and elements are widely used to add icons.
All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
Font Awesome 5 Icons
To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.
Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.
Note: No downloading or installation is required!
Example
Font Awesome 4 Icons
To use the Font Awesome 4 icons, add the following line inside the section of your HTML page:
Note: No downloading or installation is required!
Example
Bootstrap 3 Icons
To use the Bootstrap 3 glyphicons, add the following line inside the section of your HTML page:
Note: No downloading or installation is required!
Example
Note: Glyphicons are not supported in Bootstrap 4.
For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.
Google Icons
To use the Google icons, add the following line inside the section of your HTML page:
Note: No downloading or installation is required!
Example
cloud
favorite
attachment
computer
traffic
For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.
Icons Tutorial
To insert an icon, add the name of the icon class to any inline HTML element.
The and elements are widely used to add icons.
All the icons in the icon libraries below, are scalable vector icons that can be customized with CSS (size, color, shadow, etc.)
Font Awesome 5 Icons
To use the Free Font Awesome 5 icons, go to fontawesome.com and sign in to get a code to use in your web pages.
Read more about how to get started with Font Awesome in our Font Awesome 5 chapter.
Note: No downloading or installation is required!
Example
Font Awesome 4 Icons
To use the Font Awesome 4 icons, add the following line inside the section of your HTML page:
Note: No downloading or installation is required!
Example
Bootstrap 3 Icons
To use the Bootstrap 3 glyphicons, add the following line inside the section of your HTML page:
Note: No downloading or installation is required!
Example
Note: Glyphicons are not supported in Bootstrap 4.
For more information about Bootstrap 3 and Glyphicons, visit our Bootstrap 3 Tutorial.
Google Icons
To use the Google icons, add the following line inside the section of your HTML page:
Note: No downloading or installation is required!
Example
cloud
favorite
attachment
computer
traffic
For a complete list of ALL icons (font awesome, bootstrap and google), visit the Icon Reference.
27 CSS Icons and Icon Sets
Collection of hand-picked free HTML and CSS icon and icon set examples from Codepen and other resources.
Related Articles
Table of Contents
Icon Sets
Author
Links
About a code
Tabler Icons
Free and open source icons designed to make your website or app attractive, visually consistent and simply beautiful.
Author
Links
About a code
css.gg
700+ CSS icons. Open-source CSS, SVG and Figma UI icons available in SVG sprite, styled-components, NPM & API.
Author
Links
About a code
Unicons
1000+ pixel-perfect vector icons and iconfont for your next project.
Author
Links
About a code
icons.css
Single element pure CSS icons. Elegantly developed pure CSS icons. Font size based single element icons. Production ready icons for your projects.
Author
Links
About a code
Font Awesome
The iconic SVG, font, and CSS toolkit.
Author
Links
About a code
iConicss
More than 900 pure CSS3 icons. Each icon uses a single anchor element (one div ) and just one color: the currentColor (and transparent) except for the colored icons (as the name suggests). Thus they can easily be included in a page with a single HTML element and use the current color and current font size.
Author
Links
About a code
Gov Icons
Free, open-sourced icon font and CSS toolkit with 136 government themed icons, for easy scalable vector graphics.
Author
Варианты установки SVG иконки
Есть несколько методов установки SVG иконки на страницу, и у каждого есть свои плюсы и минусы.
У нас есть SVG иконка happyface.svg, которую нужно добавить на страницу.
Установка графическим файлом
Тут все просто, иконка ставится как обычная картинка в нужное место:
Это очень простой и удобный способ, но у нас появляется дополнительный файл. А если таких картинок на странице много, то и определенные неудобства
Установка в HTML
Можно вставить SVG графику непосредственно в нужное место HTML кода:
Установка через CSS
Можно сделать SVG графику фоновым изображением нужного элемента. Для этого переводим SVG код в CSS формат конвертером:
Размеры блока с бекграундом задаются через CSS, поэтому атрибуты width=’128′ и height=’128′ в SVG коде не нужны Получившийся результат вставляем в CSS нужного нам элемента, например:
background-image : url ( «data:image/svg+xml,%3Csvg role=’img’ xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 24 24′ stroke=’%23337AB7′ stroke-width=’2′ stroke-linecap=’square’ stroke-linejoin=’miter’ fill=’none’ color=’%23337AB7’%3E %3Cpath d=’M7.3010863,14.0011479 C8.0734404,15.7578367 9.98813711,17 11.9995889,17 C14.0024928,17 15.913479,15.7546194 16.6925307,14.0055328’/%3E %3Cline stroke-linecap=’round’ x1=’9′ y1=’9′ x2=’9′ y2=’9’/%3E %3Cline stroke-linecap=’round’ x1=’15’ y1=’9′ x2=’15’ y2=’9’/%3E %3Ccircle cx=’12’ cy=’12’ r=’10’/%3E %3C/svg%3E» ) ;
Установка через JS
let svgimg = document . querySelectorAll ( «.happyface» ) ; // находим все элементы с классом happyface
- Опубликовано: 10.09.2019 / Обновлено: 21.02.2020
- Рубрики: Весь сайт, Картинки и иконки
- Метки: SVG, Иконки
- 16344 просмотра
Смотрите также:
Параллакс подвал
Интересный эффект появления футера сайта из под страницы
Фиксированные снежинки на CSS
Простые стили для добавления на сайт снежинок или других значков
Набор анимаций animate.css
Набор CSS классов для анимации различных элементов на сайте