Html and css icons

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.

Источник

Html and css icons

Open-source CSS, SVG and Figma UI Icons
Available in SVG Sprite, styled-components, NPM & API
Version: v2.0 — Total weight: 316kb

1	.gg-border-bottom
2	transform: scale(var(—ggs, 1 ));
3	>
4
5	.gg-border-bottom,
6	.gg-border-bottom ::before
7	box-sizing: border-box;
8	position: relative;
9	display: block;
10	width: 14px ;
11	height: 14px ;
12	border-bottom: 3px solid
13	>
14
15	.gg-border-bottom ::before
16	content: «»;
17	position: absolute;
18	height: 10px ;
19	border: 3px solid;
20	border-bottom: 0 ;
21	bottom: 2px ;
22	left: 0 ;
23	opacity: .3
24	>

1	.gg-stark
2	background: currentColor;
3	box-sizing: border-box;
4	position: relative;
5	display: block;
6	transform: rotate( 45deg ) scale(var(—ggs, 1 ));
7	width: 3px ;
8	height: 16px
9	>
10
11	.gg-stark ::after ,
12	.gg-stark ::before
13	content: «»;
14	display: block;
15	box-sizing: border-box;
16	position: absolute;
17	width: 8px ;
18	height: 16px ;
19	border: 3px solid
20	>
21
22	.gg-stark ::before
23	border-top-left-radius: 100px ;
24	border-bottom-left-radius: 100px ;
25	border-right: 0 ;
26	border-top-color: transparent;
27	left: -7px ;
28	bottom: 0
29	>
30
31	.gg-stark ::after
32	border-top-right-radius: 100px ;
33	border-bottom-right-radius: 100px ;
34	border-left: 0 ;
35	border-bottom-color: transparent;
36	right: -7px ;
37	top: 0
38	>

Available in

Features

700 Precise and Detailed UI Icons — provided with well-organized Figma components library.

Источник

Иконки

Как вы и просили, Font Awesome включает в себя 41 новую иконку в версии 4.7. Как запросить новые иконки? Да вот так. Нужна версия в векторе или хотите использовать Font Awesome у себя на компьютере? Посмотрите шпаргалку.

41 новая иконка версии 4.7

Веб-приложения

Для сферы людей с ограниченными возможностями

Жесты

Транспорт

Гендерные иконки

Типы файлов

Вращающиеся

Элементы форм

Платежные системы

Диаграммы

Валюты

Редактирование

Направление

Видео-плеер

Бренды

Внимание!

Судя по всему, Adblock Plus с включенной функцией «Remove Social Media Buttons» может удалять иконки Font Awesome категории бренд. Мы не будем использовать хаки, чтобы заставить их отображаться. Пожалуйста, сообщите об ошибке Adblock Plus, если вы считаете, что это действительно ошибка. Чтобы избежать подобных ошибок вам необходимо изменить классы социальных иконок.

• Торговые марки используемые в иконках принадлежат их владельцам.
• Использование торговых марок в иконках не означает, что их владелец это одабривает, как и наоборот.
• Иконки торговых марок должны использоваться только для представления компании или её продуктов.
• Пожалуйста, не используйте логотипы брендов ни для чего, кроме как для представления этих самых брендов.

Медицина

Font Awesome предоставляется по лицензии SIL OFL 1.1 ·
Разработка предоставляется по лицензии MIT License ·
Документация предоставляется по лицензии CC BY 3.0

Font Awesome 5 доступен!

Больше иконок

Начните использовать 893 иконки прямо сейчас с бесплатной версией FA, плюс еще 1,283 иконки с Pro-версией, которая позволит вам в дальнейшем получить еще 46 категорий иконок, когда мы их закончим!

Новые SVG

Наши новые SVG в купе с Javascript дадут вам всю мощь SVG без каких-либо хлопот.

Еще и еще

Лигатуры для удобного использования на десктопах, обертка для удобного перехода с 4 версии, больше стилей, иконок и инструментов с платной версией FA Pro.

Источник

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

Источник