Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Css иконки: Font Awesome — иконочный шрифт и CSS-инструментарий

Содержание

CSS Иконки. Уроки для начинающих. W3Schools на русском

Как добавить иконки

Самый простой способ добавить иконку на свою HTML-страницу — использовать библиотеку иконок, например, Font Awesome.

Добавьте название указанного класса иконок в любой встроенный элемент HTML (например, <i> или <span>).

Все иконки в библиотеках иконок ниже представляют собой масштабируемые векторы, которые можно настраивать с помощью CSS (размер, цвет, тень и т.д.)

Font Awesome Иконки

Чтобы использовать иконки Font Awesome, перейдите на fontawesome.com, войдите в систему и получите код для добавления в раздел <head> вашей HTML-страницы.:

<script src="https://kit.fontawesome.com/ваш код.js"></script>

Узнайте больше о том, как начать использовать Font Awesome в нашем Font Awesome 5 Учебнике.

Примечание: Не требуется загрузка или установка!

Пример





<i></i>
<i ></i>
<i></i>
<i></i>
<i></i>

</body>
</html>

Результат:

Попробуйте сами »

Bootstrap иконки

Чтобы использовать глификонки Bootstrap, добавьте следующую строку в раздел <head> вашей HTML-страницы:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Примечание: Не требуется загрузка или установка!

Пример





<i></i>
<i></i>
<i></i>
<i ></i>
<i></i>

</body>
</html>

Результат:

Попробуйте сами »

Google Иконки

Чтобы использовать Google иконки, добавьте следующую строку внутри раздела <head> вашей HTML страницы:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Примечание: Не требуется загрузка или установка!

Пример





<i>cloud</i>
<i >favorite</i>
<i >attachment</i>
<i >computer</i>
<i >traffic</i>

</body>
</html>

Результат:

Попробуйте сами »

Примечание. Ссылки на сайты иконок (Fontawesome, Bootstrap, Google-иконки) могут меняться в зависимости от выхода новой версии набора иконок. Поэтому для получения наиболее новой версии набора иконок и ссылки на них посетите официальный сайт необходимого набора и скопируйте нужную ссылку.

Работа с иконками | WebReference

Иконки выводятся через псевдокласс ::before, поэтому к любому элементу достаточно добавить класс с именем иконки. Обычно применяется элемент <i>, но можно использовать и любой другой строчный элемент, например: <b>, <span> и др.

Для <i> указывается два основных класса — fa и fa-icon, где вместо icon пишется имя иконки. Все имена доступны на этой странице.

http://fortawesome.github.io/Font-Awesome/icons

Иконки разбиты по категориям, также есть поиск по ключевым словам (рис. 1).

Рис. 1. Иконки для видеоплеера

Чтобы добавить иконку с именем play напишем следующий код:

<i></i>

Сам элемент <i> пустой и вставляется в то место на странице, где требуется вывод иконки. Размер её совпадает с размером текущего текста.

Размеры иконок

Размер любой иконки из набора мы можем изменить с помощью свойства font-size, переопределив его в своём стиле. Также Font Awesome предлагает пять готовых размеров. Достаточно добавить дополнительный класс к элементу <i> как показано в примере 1.

Пример 1. Размер иконок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
 </head>
 <body>
  <p><i></i> Исходный размер</p>
  <p><i></i> fa-lg</p>
  <p><i></i> fa-2x</p>
  <p><i></i> fa-3x</p>
  <p><i></i> fa-4x</p>
  <p><i></i> fa-5x</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Размеры иконок

Цвета

Поскольку иконка это текстовый символ, то к нему применимы стилевые свойства color, background, text-shadow и другие, задающие оформление текста. В примере 2 показаны некоторые варианты изменения вида иконок.

Пример 2. Оформление иконок через стили

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <style>
   .fa-bug { color: #f15a22; }
   .fa-book {
    background: #000; /* Чёрный цвет фона */
    padding: 2px 5px; /* Поля */
    border-radius: 3px; /* Радиус скругления */
   }
   .fa-car {
    color: #96c13c; /* Цвет иконки */
    text-shadow: 2px 2px 0 #333; /* Резкая тень под иконкой */
   }
   .fa-comment {
    color: #f7941e; /* Цвет иконки */
    text-shadow: 0 0 6px #000; /* Размытая тень */
   }
  </style>
 </head>
 <body>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
 </body>
</html>

Результат данного примера показан на рис. 3.

Рис. 3. Цветные иконки

Font Awesome вводит специальный класс fa-inverse, изменяющий цвет иконок на белый, поэтому в стилях для иконки книжки цвет не указывается.

Поворот иконок

Иконки можно поворачивать на 90, 180 или 270 градусов по часовой стрелке, а также отражать их по горизонтали или вертикали. Для этого применяются следующие классы:

  • fa-rotate-90 — поворот на 90º по часовой стрелке;
  • fa-rotate-180 — поворот на 180º;
  • fa-rotate-270 — поворот на 270º;
  • fa-flip-horizontal — отражение по горизонтали;
  • fa-flip-vertical — отражение по вертикали.

Надо учитывать, что не все иконки имеет смысл поворачивать и отражать, результат будет заметен для несимметричных иконок (пример 3).

Пример 3. Поворот и отражение иконок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
 </head>
 <body>
  <p><i></i></p>
  <p><i></i></p>
  <p><i></i></p>
 </body>
</html>

Результат данного примера показан на рис. 4. Первая иконка самолёта выводится в исходном виде, вторая поворачивается на 90º, а третья отражается по горизонтали.

Рис. 4. Преобразования иконки

Анимация

Анимация обычно применяется для создания эффекта ожидания. Иконки можно заставить бесконечно вращаться по часовой стрелке двумя способами. Класс fa-spin производит плавное вращение, а fa-pulse — пошаговое вращение. Ниже показано вращение футбольного мяча.

<p><i></i></p>

Объединение иконок

Кроме обычного вывода иконки можно комбинировать между собой. Для этого создаём элемент <div> с классом fa-stack, а в него уже вставляем желаемые иконки. Вначале идёт нижняя, затем верхняя. К самим иконкам добавляется класс fa-stack-1x или fa-stack-2x, в зависимости от того, какая иконка должна быть больше размером. Ниже показана основная структура кода.

<div>
  <i></i>
  <i></i>
</div>

Для отдельных иконок мы можем задавать собственный стиль, например, цвет иконки. Тем самым получить новые цветовые решения (пример 4).

Пример 4. Комбинация иконок

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Font Awesome</title>
  <link rel="stylesheet" href="css/font-awesome.min.css">
  <style>
   .fa-ban { 
    color: #d51920; /* Цвет */
    opacity: 0.6; /* Полупрозрачность */
   }
  </style>
 </head>
 <body>
  <div>
   <i></i>
   <i></i>
  </div>
 </body>
</html>

Результат данного примера показан на рис. 5.

Рис. 5. Комбинация иконок

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 11.08.2018

Редакторы: Влад Мержевич

Иконки в формате шрифта для сайта

В этой статье мы рассмотрим, что такое иконки в формате шрифта, и какие они имеют преимущества и недостатки. Кроме этого, разберём основные принципы работы с иконками в формате шрифта и некоторые варианты их использования.

Что такое иконки в формате шрифта

Иконки в формате шрифта представляет собой просто шрифт. Но в отличие от обычных шрифтов они содержат не буквы и цифры, а значки (иконки).

Иконки в формате шрифта имеют следующие преимущества перед иконками в виде растровых изображений:

  • Возможность применять к ним любые CSS стили, которые можно применять к обычному тексту;
  • Хорошо масштабируются, т.к. иконки в формате шрифта являются векторными изображениями. Т.е. Вы можете увеличивать или уменьшать их размеры без потери качества;
  • Меньшее количество HTTP-запросов, которое может потребоваться для их загрузки по сравнению с количеством HTTP-запросов, которых может потребоваться для загрузки иконок в виде растровых изображений;
  • Более быстрая загрузка иконок, т.к. они имеют небольшой размер;
  • Наборы иконок в формате шрифта поддерживаются всеми браузерами, из-за того что они поставляются в различных форматах: eot, ttf, woff, svg и др. Т.е. если браузер не имеет поддержку одного формата, то он использует другой;
  • Большинство наборов иконок (Font Awesome, Glyphicons и др.) содержат в своём наборе иконки SVG (в формате шрифта), которые являются очень чёткими и отлично масштабируются.

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

Но иконки в формате шрифта кроме преимуществ, имеют ещё и следующие недостатки:

  • их затруднительно использовать для иконок, которые являются сложными изображениями, а не просто значками;
  • цвет иконки в формате шрифта ограничен одним цветом.

Использование иконок в формате шрифта

Иконки в формате шрифта невероятно просты в использовании.

Рассмотрим основные действия для работы с пакетами иконок в формате шрифта:

  1. Скачать с сайта пакет иконок в формате шрифта, который вы хотите использовать на своём сайте. Рассмотрим наши действия на примере Font Awesome.

  2. Скопировать и подключить файл CSS поставляемый вместе с пакетом иконок в формате шрифта. Если открыть данный файл, то Вы увидете, что он содержит инструкцию @font-face, которая подгружает шрифты и выполняет их настройку. Кроме этого, этот файл также может содержать правила CSS, с помощью которых упрощается работа с этим набором шрифтов.

    
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  3. Скопировать каталог «fonts», содержащий шрифты, в Вашу директорию на сайте. Если уже есть такая директория, то Вы можете просто скопировать содержимое каталога «fonts» в эту директорию.
  4. В зависимости от пакета иконок, который Вы используете, значки обычно вставляются одним из двух способов:
  • с помощью указания соответствующих классов в атрибуте class элемента i или span. 
    
<!-- Отображение иконки в Font Awesome -->
<span></span>
<i></i>
  • с помощью указания номера значка в атрибуте data: 
    
<!--Шрифт Elegant Icon Font -->
<!--Отображение иконки с помощью указания номера значка в атрибуте data -->
<span data-icon="&#x3f;"></span>
  • При необходимости можно настроить отображения иконки с помощью стилей CSS. 
    
<!-- Например, увеличить размер иконки в 4 раза с помощью класса Font Awesome fa-4x -->
<i></i>
<!-- Например, с помощью указания собственных правил CSS -->
<!-- Установим размер иконки и её цвет -->
<i></i>

    Но стили для иконок обычно не задают с помощью атрибута style, для этого используют классы:

    
CSS:
.large-green {
  font-size: 50px;
  color: green;
}
HTML:
<i></i>

    • Примеры использования иконок в формате шрифта

    Рассмотрим некоторые примеры, где можно использовать иконки в формате шрифта.

    • Иконки можно использовать в кнопках:

      
<button><i></i> Кнопка1</button>
<button><i></i> Кнопка2</button>
<button><i></i> Кнопка3</button>
<button><i></i> Кнопка4</button>

      Кнопка1 Кнопка2 Кнопка3 Кнопка4

    • Иконки можно использовать в меню:

    • Иконки можно использовать в различных информационных виджетах:

    • Иконки можно использовать для создания социальных кнопок:

    • Иконки можно использовать в кнопках, с помощью которых осуществляется работа с записями в таблице:

    Популярные пакеты иконок в формате шрифта

    Рассмотрим наиболее популярные пакеты иконок в формате шрифта.

    Glyphicons

    Font Awesome

    Foundation Icon Fonts

    Brandico

    Elegant Icon Font

    Themify Icons

    Ionicons

    Octicons

    Open Iconic

    Typicons

    Stroke 7

    Ligature symbols

    Различные коллекции иконок


    Page not found (404)

    Toggle navigation
    • Packs
      • Значок пакеты недавно Загрузил
      • Самых популярных значок пакеты
      • Эксклюзивные наборы значков
    • категории
      • Сельское хозяйство Иконки
      • Животные Иконки
      • Аватар и смайлики Иконки
      • Красота и мода Иконки
      • Бизнес и финансы Иконки
      • Мультфильм Иконки
      • Кино, телевидение и фильмы Иконки
      • Одежда и аксессуары Иконки
      • Преступление и безопасность Иконки
      • Культура, религия и фестивали Иконки
      • Дизайн и разработка Иконки
      • Экология, окружающая среда и природа Иконки
      • Электронная торговля и покупки Иконки
      • Электронные устройства и оборудование Иконки
      • Файлы и папки Иконки
      • Флаги и карты Иконки
      • Дизайн и разработка Иконки
      • Экология, окружающая среда и природа Иконки
      • Gym и Fitness Иконки
      • Здравоохранение и медицина Иконки
      • Промышленность и инфраструктура Иконки
      • Инфографика Иконки
      • Дети Иконки
      • люблю Иконки
      • Разное Иконки
      • Музыка и мультимедиа Иконки
      • Сеть и связь Иконки
      • Недвижимость и строительство Иконки
      • Школа и образование Иконки
      • Наука и технологии Иконки
      • SEO и Web Иконки
      • Sign и Symbol Иконки
      • Социальные медиа и логотипы Иконки
      • Спорт и игры Иконки
      • Инструменты, строительство и оборудование Иконки
      • Транспорт и транспортные средства Иконки
      • Путешествия, отели и каникулы Иконки
      • Пользовательский интерфейс и жесты Иконки
      • Погода и сезоны Иконки
    • стили значков
      • 3D Иконки
      • Badge Иконки
      • Filled outline Иконки
      • Flat Иконки
      • Glyph Иконки
      • Handdrawn Иконки
      • Long shadow Иконки
      • Outline Иконки
      • Photorealistic Иконки
    • Log in
    • Register
    404 Icon by Laura Reen

    Таблица значений иконок Font Awesome

    Приветствую. Наверное вы уже знаете о таком замечательном инструменте как иконочный шрифт от Font Awesome для сайта.

    Если нет, то вкратце расскажу, это набор масштабируемых векторных иконок, с помощью которых можно добавлять на сайт разнообразные иконки и при этом не использовать обычные картинки, но самое важное это то что с ними можно работать как с обычным текстом, то есть можно добавлять к иконке размер, цвет, тень, производить разнообразные форматирования текста и так далее.

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

    Перед тем как пользоваться иконками Font Awesome на своем сайте вам нужно их будет подключить, способов есть несколько, к примеру скачать и загрузить на свой сайт или сделать прямое подключение из сервера CDNJS.

    Я не буду сейчас описывать детально как подключить иконки Awesome на свой сайт с загрузкой всех файлов, так как статья чуточку о другом, как это сделать вы можете найти самостоятельно в интернете, а для того что бы подключить их из ресурса CDNJS вам достаточно на сайт где то над </head> добавить строку:

    <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css»>

    <link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css»>

    После добавления этой строки вы сможете полностью работать с иконочным шрифтом.

    Ок, думаю что такое шрифт Font Awesome вы сможете узнать самостоятельно из поисковых систем, сегодня я же хочу добавить на страницу значения Font Awesome каждого из шрифтов именно для использования из css файла.

    По умолчанию шрифт добавляется конкретно на страницу html используя тег <i> к примеру так:

    <i aria-hidden=»true»></i>

    <i aria-hidden=»true»></i>

    Но иногда нам нужно добавлять его в файлы css, а так как просто вставить название шрифта в файл стилей не получится, он попросту работать не будет, нужно добавлять именно значение шрифта, и мы сегодня рассмотрим все значения шрифта Font Awesome для возможности добавления их в css.

    Допустим вы хотите к какому то элементу на сайте впереди него добавить иконку Awesome, ниже наведу пример как это делается:

    .element:before { content: «\f000»; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; color: #000; font-size: 18px; padding-right: 0.5em; position: absolute; top: 10px; left: 0; }

    .element:before {

        content: «\f000»;

        font-family: FontAwesome;

        font-style: normal;

        font-weight: normal;

        text-decoration: inherit;

        color: #000;

        font-size: 18px;

        padding-right: 0.5em;

        position: absolute;

        top: 10px;

        left: 0;

    }

    То есть мы добавили :before к нужному нам блоку и добавили шрифт иконок font-family: FontAwesome; со значением самой иконки content: «\f000»; ( ), вот и все в принципе, теперь иконка отобразится впереди указанного блока, все остальные css стили указанные здесь только для форматирования внешнего вида иконки.

    И так ниже предоставляю для вас полный список иконок Awesome с указанием значений всех его шрифтов. Вы конечно же можете любое значение посмотреть и самостоятельно в своем подключенном файле font-awesome.min.css но я думаю что будет намного удобнее узнать значение шрифта воспользовавшись предоставленной на нашем сайте таблицей.

    Список значков шрифта Awesome и их значений для CSS

    fa-glass»\f000″

    fa-music»\f001″

    fa-search»\f002″

    fa-envelope-o»\f003″

    fa-heart»\f004″

    fa-star»\f005″

    fa-star-o»\f006″

    fa-user»\f007″

    fa-film»\f008″

    fa-th-large»\f009″

    fa-th»\f00a»

    fa-th-list»\f00b»

    fa-check»\f00c»

    fa-times»\f00d»

    fa-search-plus»\f00e»

    fa-search-minus»\f010″

    fa-power-off»\f011″

    fa-signal»\f012″

    fa-cog»\f013″

    fa-trash-o»\f014″

    fa-home»\f015″

    fa-file-o»\f016″

    fa-clock-o»\f017″

    fa-road»\f018″

    fa-download»\f019″

    fa-arrow-circle-o-down»\f01a»

    fa-arrow-circle-o-up»\f01b»

    fa-inbox»\f01c»

    fa-play-circle-o»\f01d»

    fa-repeat»\f01e»

    fa-refresh»\f021″

    fa-list-alt»\f022″

    fa-lock»\f023″

    fa-flag»\f024″

    fa-headphones»\f025″

    fa-volume-off»\f026″

    fa-volume-down»\f027″

    fa-volume-up»\f028″

    fa-qrcode»\f029″

    fa-barcode»\f02a»

    fa-tag»\f02b»

    fa-tags»\f02c»

    fa-book»\f02d»

    fa-bookmark»\f02e»

    fa-print»\f02f»

    fa-camera»\f030″

    fa-font»\f031″

    fa-bold»\f032″

    fa-italic»\f033″

    fa-text-height»\f034″

    fa-text-width»\f035″

    fa-align-left»\f036″

    fa-align-center»\f037″

    fa-align-right»\f038″

    fa-align-justify»\f039″

    fa-list»\f03a»

    fa-outdent»\f03b»

    fa-indent»\f03c»

    fa-video-camera»\f03d»

    fa-picture-o»\f03e»

    fa-pencil»\f040″

    fa-map-marker»\f041″

    fa-adjust»\f042″

    fa-tint»\f043″

    fa-pencil-square-o»\f044″

    fa-share-square-o»\f045″

    fa-check-square-o»\f046″

    fa-arrows»\f047″

    fa-step-backward»\f048″

    fa-fast-backward»\f049″

    fa-backward»\f04a»

    fa-play»\f04b»

    fa-pause»\f04c»

    fa-stop»\f04d»

    fa-forward»\f04e»

    fa-fast-forward»\f050″

    fa-step-forward»\f051″

    fa-eject»\f052″

    fa-chevron-left»\f053″

    fa-chevron-right»\f054″

    fa-plus-circle»\f055″

    fa-minus-circle»\f056″

    fa-times-circle»\f057″

    fa-check-circle»\f058″

    fa-question-circle»\f059″

    fa-info-circle»\f05a»

    fa-crosshairs»\f05b»

    fa-times-circle-o»\f05c»

    fa-check-circle-o»\f05d»

    fa-ban»\f05e»

    fa-arrow-left»\f060″

    fa-arrow-right»\f061″

    fa-arrow-up»\f062″

    fa-arrow-down»\f063″

    fa-share»\f064″

    fa-expand»\f065″

    fa-compress»\f066″

    fa-plus»\f067″

    fa-minus»\f068″

    fa-asterisk»\f069″

    fa-exclamation-circle»\f06a»

    fa-gift»\f06b»

    fa-leaf»\f06c»

    fa-fire»\f06d»

    fa-eye»\f06e»

    fa-eye-slash»\f070″

    fa-exclamation-triangle»\f071″

    fa-plane»\f072″

    fa-calendar»\f073″

    fa-random»\f074″

    fa-comment»\f075″

    fa-magnet»\f076″

    fa-chevron-up»\f077″

    fa-chevron-down»\f078″

    fa-retweet»\f079″

    fa-shopping-cart»\f07a»

    fa-folder»\f07b»

    fa-folder-open»\f07c»

    fa-arrows-v»\f07d»

    fa-arrows-h»\f07e»

    fa-bar-chart»\f080″

    fa-twitter-square»\f081″

    fa-facebook-square»\f082″

    fa-camera-retro»\f083″

    fa-key»\f084″

    fa-cogs»\f085″

    fa-comments»\f086″

    fa-thumbs-o-up»\f087″

    fa-thumbs-o-down»\f088″

    fa-star-half»\f089″

    fa-heart-o»\f08a»

    fa-sign-out»\f08b»

    fa-linkedin-square»\f08c»

    fa-thumb-tack»\f08d»

    fa-external-link»\f08e»

    fa-sign-in»\f090″

    fa-trophy»\f091″

    fa-github-square»\f092″

    fa-upload»\f093″

    fa-lemon-o»\f094″

    fa-phone»\f095″

    fa-square-o»\f096″

    fa-bookmark-o»\f097″

    fa-phone-square»\f098″

    fa-twitter»\f099″

    fa-facebook»\f09a»

    fa-github»\f09b»

    fa-unlock»\f09c»

    fa-credit-card»\f09d»

    fa-rss»\f09e»

    fa-hdd-o»\f0a0″

    fa-bullhorn»\f0a1″

    fa-bell»\f0f3″

    fa-certificate»\f0a3″

    fa-hand-o-right»\f0a4″

    fa-hand-o-left»\f0a5″

    fa-hand-o-up»\f0a6″

    fa-hand-o-down»\f0a7″

    fa-arrow-circle-left»\f0a8″

    fa-arrow-circle-right»\f0a9″

    fa-arrow-circle-up»\f0aa»

    fa-arrow-circle-down»\f0ab»

    fa-globe»\f0ac»

    fa-wrench»\f0ad»

    fa-tasks»\f0ae»

    fa-filter»\f0b0″

    fa-briefcase»\f0b1″

    fa-arrows-alt»\f0b2″

    fa-users»\f0c0″

    fa-link»\f0c1″

    fa-cloud»\f0c2″

    fa-flask»\f0c3″

    fa-scissors»\f0c4″

    fa-files-o»\f0c5″

    fa-paperclip»\f0c6″

    fa-floppy-o»\f0c7″

    fa-square»\f0c8″

    fa-bars»\f0c9″

    fa-list-ul»\f0ca»

    fa-list-ol»\f0cb»

    fa-strikethrough»\f0cc»

    fa-underline»\f0cd»

    fa-table»\f0ce»

    fa-magic»\f0d0″

    fa-truck»\f0d1″

    fa-pinterest»\f0d2″

    fa-pinterest-square»\f0d3″

    fa-google-plus-square»\f0d4″

    fa-google-plus»\f0d5″

    fa-money»\f0d6″

    fa-caret-down»\f0d7″

    fa-caret-up»\f0d8″

    fa-caret-left»\f0d9″

    fa-caret-right»\f0da»

    fa-columns»\f0db»

    fa-sort»\f0dc»

    fa-sort-desc»\f0dd»

    fa-sort-asc»\f0de»

    fa-envelope»\f0e0″

    fa-linkedin»\f0e1″

    fa-undo»\f0e2″

    fa-gavel»\f0e3″

    fa-tachometer»\f0e4″

    fa-comment-o»\f0e5″

    fa-comments-o»\f0e6″

    fa-bolt»\f0e7″

    fa-sitemap»\f0e8″

    fa-umbrella»\f0e9″

    fa-clipboard»\f0ea»

    fa-lightbulb-o»\f0eb»

    fa-exchange»\f0ec»

    fa-cloud-download»\f0ed»

    fa-cloud-upload»\f0ee»

    fa-user-md»\f0f0″

    fa-stethoscope»\f0f1″

    fa-suitcase»\f0f2″

    fa-bell-o»\f0a2″

    fa-coffee»\f0f4″

    fa-cutlery»\f0f5″

    fa-file-text-o»\f0f6″

    fa-building-o»\f0f7″

    fa-hospital-o»\f0f8″

    fa-ambulance»\f0f9″

    fa-medkit»\f0fa»

    fa-fighter-jet»\f0fb»

    fa-beer»\f0fc»

    fa-h-square»\f0fd»

    fa-plus-square»\f0fe»

    fa-angle-double-left»\f100″

    fa-angle-double-right»\f101″

    fa-angle-double-up»\f102″

    fa-angle-double-down»\f103″

    fa-angle-left»\f104″

    fa-angle-right»\f105″

    fa-angle-up»\f106″

    fa-angle-down»\f107″

    fa-desktop»\f108″

    fa-laptop»\f109″

    fa-tablet»\f10a»

    fa-mobile»\f10b»

    fa-circle-o»\f10c»

    fa-quote-left»\f10d»

    fa-quote-right»\f10e»

    fa-spinner»\f110″

    fa-circle»\f111″

    fa-reply»\f112″

    fa-github-alt»\f113″

    fa-folder-o»\f114″

    fa-folder-open-o»\f115″

    fa-smile-o»\f118″

    fa-frown-o»\f119″

    fa-meh-o»\f11a»

    fa-gamepad»\f11b»

    fa-keyboard-o»\f11c»

    fa-flag-o»\f11d»

    fa-flag-checkered»\f11e»

    fa-terminal»\f120″

    fa-code»\f121″

    fa-reply-all»\f122″

    fa-star-half-o»\f123″

    fa-location-arrow»\f124″

    fa-crop»\f125″

    fa-code-fork»\f126″

    fa-chain-broken»\f127″

    fa-question»\f128″

    fa-info»\f129″

    fa-exclamation»\f12a»

    fa-superscript»\f12b»

    fa-subscript»\f12c»

    fa-eraser»\f12d»

    fa-puzzle-piece»\f12e»

    fa-microphone»\f130″

    fa-microphone-slash»\f131″

    fa-shield»\f132″

    fa-calendar-o»\f133″

    fa-fire-extinguisher»\f134″

    fa-rocket»\f135″

    fa-maxcdn»\f136″

    fa-chevron-circle-left»\f137″

    fa-chevron-circle-right»\f138″

    fa-chevron-circle-up»\f139″

    fa-chevron-circle-down»\f13a»

    fa-html5″\f13b»

    fa-css3″\f13c»

    fa-anchor»\f13d»

    fa-unlock-alt»\f13e»

    fa-bullseye»\f140″

    fa-ellipsis-h»\f141″

    fa-ellipsis-v»\f142″

    fa-rss-square»\f143″

    fa-play-circle»\f144″

    fa-ticket»\f145″

    fa-minus-square»\f146″

    fa-minus-square-o»\f147″

    fa-level-up»\f148″

    fa-level-down»\f149″

    fa-check-square»\f14a»

    fa-pencil-square»\f14b»

    fa-external-link-square»\f14c»

    fa-share-square»\f14d»

    fa-compass»\f14e»

    fa-caret-square-o-down»\f150″

    fa-caret-square-o-up»\f151″

    fa-caret-square-o-right»\f152″

    fa-eur»\f153″

    fa-gbp»\f154″

    fa-usd»\f155″

    fa-inr»\f156″

    fa-jpy»\f157″

    fa-rub»\f158″

    fa-krw»\f159″

    fa-btc»\f15a»

    fa-file»\f15b»

    fa-file-text»\f15c»

    fa-sort-alpha-asc»\f15d»

    fa-sort-alpha-desc»\f15e»

    fa-sort-amount-asc»\f160″

    fa-sort-amount-desc»\f161″

    fa-sort-numeric-asc»\f162″

    fa-sort-numeric-desc»\f163″

    fa-thumbs-up»\f164″

    fa-thumbs-down»\f165″

    fa-youtube-square»\f166″

    fa-youtube»\f167″

    fa-xing»\f168″

    fa-xing-square»\f169″

    fa-youtube-play»\f16a»

    fa-dropbox»\f16b»

    fa-stack-overflow»\f16c»

    fa-instagram»\f16d»

    fa-flickr»\f16e»

    fa-adn»\f170″

    fa-bitbucket»\f171″

    fa-bitbucket-square»\f172″

    fa-tumblr»\f173″

    fa-tumblr-square»\f174″

    fa-long-arrow-down»\f175″

    fa-long-arrow-up»\f176″

    fa-long-arrow-left»\f177″

    fa-long-arrow-right»\f178″

    fa-apple»\f179″

    fa-windows»\f17a»

    fa-android»\f17b»

    fa-linux»\f17c»

    fa-dribbble»\f17d»

    fa-skype»\f17e»

    fa-foursquare»\f180″

    fa-trello»\f181″

    fa-female»\f182″

    fa-male»\f183″

    fa-gratipay»\f184″

    fa-sun-o»\f185″

    fa-moon-o»\f186″

    fa-archive»\f187″

    fa-bug»\f188″

    fa-vk»\f189″

    fa-weibo»\f18a»

    fa-renren»\f18b»

    fa-pagelines»\f18c»

    fa-stack-exchange»\f18d»

    fa-arrow-circle-o-right»\f18e»

    fa-arrow-circle-o-left»\f190″

    fa-caret-square-o-left»\f191″

    fa-dot-circle-o»\f192″

    fa-wheelchair»\f193″

    fa-vimeo-square»\f194″

    fa-try»\f195″

    fa-plus-square-o»\f196″

    fa-space-shuttle»\f197″

    fa-slack»\f198″

    fa-envelope-square»\f199″

    fa-wordpress»\f19a»

    fa-openid»\f19b»

    fa-university»\f19c»

    fa-graduation-cap»\f19d»

    fa-yahoo»\f19e»

    fa-google»\f1a0″

    fa-reddit»\f1a1″

    fa-reddit-square»\f1a2″

    fa-stumbleupon-circle»\f1a3″

    fa-stumbleupon»\f1a4″

    fa-delicious»\f1a5″

    fa-digg»\f1a6″

    fa-pied-piper»\f1a7″

    fa-pied-piper-alt»\f1a8″

    fa-drupal»\f1a9″

    fa-joomla»\f1aa»

    fa-language»\f1ab»

    fa-fax»\f1ac»

    fa-building»\f1ad»

    fa-child»\f1ae»

    fa-paw»\f1b0″

    fa-spoon»\f1b1″

    fa-cube»\f1b2″

    fa-cubes»\f1b3″

    fa-behance»\f1b4″

    fa-behance-square»\f1b5″

    fa-steam»\f1b6″

    fa-steam-square»\f1b7″

    fa-recycle»\f1b8″

    fa-car»\f1b9″

    fa-taxi»\f1ba»

    fa-tree»\f1bb»

    fa-spotify»\f1bc»

    fa-deviantart»\f1bd»

    fa-soundcloud»\f1be»

    fa-database»\f1c0″

    fa-file-pdf-o»\f1c1″

    fa-file-word-o»\f1c2″

    fa-file-excel-o»\f1c3″

    fa-file-powerpoint-o»\f1c4″

    fa-file-image-o»\f1c5″

    fa-file-archive-o»\f1c6″

    fa-file-audio-o»\f1c7″

    fa-file-video-o»\f1c8″

    fa-file-code-o»\f1c9″

    fa-vine»\f1ca»

    fa-codepen»\f1cb»

    fa-jsfiddle»\f1cc»

    fa-life-ring»\f1cd»

    fa-circle-o-notch»\f1ce»

    fa-rebel»\f1d0″

    fa-empire»\f1d1″

    fa-git-square»\f1d2″

    fa-git»\f1d3″

    fa-hacker-news»\f1d4″

    fa-tencent-weibo»\f1d5″

    fa-qq»\f1d6″

    fa-weixin»\f1d7″

    fa-paper-plane»\f1d8″

    fa-paper-plane-o»\f1d9″

    fa-history»\f1da»

    fa-circle-thin»\f1db»

    fa-header»\f1dc»

    fa-paragraph»\f1dd»

    fa-sliders»\f1de»

    fa-share-alt»\f1e0″

    fa-share-alt-square»\f1e1″

    fa-bomb»\f1e2″

    fa-futbol-o»\f1e3″

    fa-tty»\f1e4″

    fa-binoculars»\f1e5″

    fa-plug»\f1e6″

    fa-slideshare»\f1e7″

    fa-twitch»\f1e8″

    fa-yelp»\f1e9″

    fa-newspaper-o»\f1ea»

    fa-wifi»\f1eb»

    fa-calculator»\f1ec»

    fa-paypal»\f1ed»

    fa-google-wallet»\f1ee»

    fa-cc-visa»\f1f0″

    fa-cc-mastercard»\f1f1″

    fa-cc-discover»\f1f2″

    fa-cc-amex»\f1f3″

    fa-cc-paypal»\f1f4″

    fa-cc-stripe»\f1f5″

    fa-bell-slash»\f1f6″

    fa-bell-slash-o»\f1f7″

    fa-trash»\f1f8″

    fa-copyright»\f1f9″

    fa-at»\f1fa»

    fa-eyedropper»\f1fb»

    fa-paint-brush»\f1fc»

    fa-birthday-cake»\f1fd»

    fa-area-chart»\f1fe»

    fa-pie-chart»\f200″

    fa-line-chart»\f201″

    fa-lastfm»\f202″

    fa-lastfm-square»\f203″

    fa-toggle-off»\f204″

    fa-toggle-on»\f205″

    fa-bicycle»\f206″

    fa-bus»\f207″

    fa-ioxhost»\f208″

    fa-angellist»\f209″

    fa-cc»\f20a»

    fa-ils»\f20b»

    fa-meanpath»\f20c»

    fa-buysellads»\f20d»

    fa-connectdevelop»\f20e»

    fa-dashcube»\f210″

    fa-forumbee»\f211″

    fa-leanpub»\f212″

    fa-sellsy»\f213″

    fa-shirtsinbulk»\f214″

    fa-simplybuilt»\f215″

    fa-skyatlas»\f216″

    fa-cart-plus»\f217″

    fa-cart-arrow-down»\f218″

    fa-diamond»\f219″

    fa-ship»\f21a»

    fa-user-secret»\f21b»

    fa-motorcycle»\f21c»

    fa-street-view»\f21d»

    fa-heartbeat»\f21e»

    fa-venus»\f221″

    fa-mars»\f222″

    fa-mercury»\f223″

    fa-transgender»\f224″

    fa-transgender-alt»\f225″

    fa-venus-double»\f226″

    fa-mars-double»\f227″

    fa-venus-mars»\f228″

    fa-mars-stroke»\f229″

    fa-mars-stroke-v»\f22a»

    fa-mars-stroke-h»\f22b»

    fa-neuter»\f22c»

    fa-genderless»\f22d»

    fa-facebook-official»\f230″

    fa-pinterest-p»\f231″

    fa-whatsapp»\f232″

    fa-server»\f233″

    fa-user-plus»\f234″

    fa-user-times»\f235″

    fa-bed»\f236″

    fa-viacoin»\f237″

    fa-train»\f238″

    fa-subway»\f239″

    fa-medium»\f23a»

    fa-y-combinator»\f23b»

    fa-optin-monster»\f23c»

    fa-opencart»\f23d»

    fa-expeditedssl»\f23e»

    fa-battery-full»\f240″

    fa-battery-three-quarters»\f241″

    fa-battery-half»\f242″

    fa-battery-quarter»\f243″

    fa-battery-empty»\f244″

    fa-mouse-pointer»\f245″

    fa-i-cursor»\f246″

    fa-object-group»\f247″

    fa-object-ungroup»\f248″

    fa-sticky-note»\f249″

    fa-sticky-note-o»\f24a»

    fa-cc-jcb»\f24b»

    fa-cc-diners-club»\f24c»

    fa-clone»\f24d»

    fa-balance-scale»\f24e»

    fa-hourglass-o»\f250″

    fa-hourglass-start»\f251″

    fa-hourglass-half»\f252″

    fa-hourglass-end»\f253″

    fa-hourglass»\f254″

    fa-hand-rock-o»\f255″

    fa-hand-paper-o»\f256″

    fa-hand-scissors-o»\f257″

    fa-hand-lizard-o»\f258″

    fa-hand-spock-o»\f259″

    fa-hand-pointer-o»\f25a»

    fa-hand-peace-o»\f25b»

    fa-trademark»\f25c»

    fa-registered»\f25d»

    fa-creative-commons»\f25e»

    fa-gg»\f260″

    fa-gg-circle»\f261″

    fa-tripadvisor»\f262″

    fa-odnoklassniki»\f263″

    fa-odnoklassniki-square»\f264″

    fa-get-pocket»\f265″

    fa-wikipedia-w»\f266″

    fa-safari»\f267″

    fa-chrome»\f268″

    fa-firefox»\f269″

    fa-opera»\f26a»

    fa-internet-explorer»\f26b»

    fa-television»\f26c»

    fa-contao»\f26d»

    fa-500px»\f26e»

    fa-amazon»\f270″

    fa-calendar-plus-o»\f271″

    fa-calendar-minus-o»\f272″

    fa-calendar-times-o»\f273″

    fa-calendar-check-o»\f274″

    fa-industry»\f275″

    fa-map-pin»\f276″

    fa-map-signs»\f277″

    fa-map-o»\f278″

    fa-map»\f279″

    fa-commenting»\f27a»

    fa-commenting-o»\f27b»

    fa-houzz»\f27c»

    fa-vimeo»\f27d»

    fa-black-tie»\f27e»

    fa-fonticons»\f280″

    Вас также может заинтересовать

    13Апр2020

    12Апр2020

    06Сен2018

    Иконки социальных сетей на CSS

    В этой статье я расскажу о эксперименте по созданию иконок социальных сетей на CSS. Они созданы не на «чистом CSS3» или «HTML5 canvas». При создании этих иконок используется традиционная техника с фоновым изображением. Цель эксперимента состоит в обеспечении кроссбраузерности, создании последовательного и универсального CSS-кода, который может быть применен в любом дизайне, приложении или теме. В принципе, это набор стилей, который позволяет отображать различные иконки, комбинируя CSS-классы.

    Демонстрация

    Реализация

    Чтобы использовать эти CSS-иконки на вашем сайте, скачайте архив, который включает файл social-buttons.css:

    <link rel=»stylesheet» href=»social-buttons.css»>

    Вариант A: Вам нужно добавить класс .sb (.sb — social button) и класс иконки (например, Twitter, Facebook, RSS и т.д.) к тегу <a>. Используйте этот вариант, если вы хотите, чтобы каждая кнопка имела свой стиль.

    <a href=»#»>Twitter</a>
    <a href=»#»>Facebook</a>

    Вариант Б: Класс .sb также используется, но только для тега-оболочки, например, для <p>, <div> или <ul>. Класс для иконки (например, Twitter, Facebook, RSS) необходимо прописать для тэга <a>. Используйте этот вариант, если хотите, чтобы кнопки имели один последовательный стиль.

    <p>
     <a href=»#»>Twitter</a>
     <a href=»#»>Facebook</a>
    </p>

    <ul>
     <li><a href=»#»>Twitter</a></li>
     <li><a href=»#»>Facebook</a></li>
    </ul>

    Доступные классы CSS


    Ниже приведен список доступных классов. Вы можете назначить столько классов, сколько хотите. Они очень универсальные. Вы можете смешивать и сочетать стили для получения различных результатов. Например, вы можете установить классы «large blue gradient glossy embossed text thick-border» для одной кнопки. Посмотрите демо-примеры.

    Размеры

    • default = 34px
    • small = 28px
    • large = 42px

    Цвета

    • blue
    • purple
    • red
    • green
    • orange
    • brown
    • black
    • gray
    • light-gray
    • light-blue
    • light-purple
    • pink
    • light-green
    • yellow

    Стили

    • min = минимальные стили, без фона и рамки
    • flat = без закругленных уголков и теней
    • circle = круглая кнопка
    • embossed = тиснение
    • pressed = нажатая кнопка
    • thick-border = толстые, строгие границы
    • no-border = без рамки
    • no-shadow = без тени
    • gradient = градиент, применяется при помощи псевдо-класса :after
    • glossy = глянцевый градиент, применяется при помощи псевдо-класса :before
    • text = иконка с текстом

    Типы иконок

    • twitter
    • facebook
    • heart
    • linkedin
    • pinterest
    • podcast
    • rss
    • share_this
    • star
    • vimeo

    Как добавить свои собственные иконки


    Так как социальных сетей слишком много, я включил только некоторые основные классы иконок в демо, чтобы файл стилей не был слишком большим, и сохранил их в файл social-icons.css. Вы можете добавить больше классов иконок с помощью простого кода CSS (не забудьте добавить класс .sb для ссылки <a href=»#»>) :

    a.sb.youtube {
     background-image: url(images/youtube.png);
    }
    a.sb.email {
     background-image: url(images/email.png);
    }

    Как переопределить размер кнопки и цвет фона

    Вы можете изменить размер кнопки и фон, используя следующий код CSS:

    a.sb {
     width: 36px;
     height: 36px;

     background-color: #ссс;
    }

    Как добавить свой градиент


    Градиентный фон применяется при помощи псевдо-элемент :before. Вы можете создавать свои градиенты с помощью Ultimate CSS Gradient Generator.

    Обратите внимание, что SVG-градиент необходим для Internet Explorer 9, так как он не поддерживает градиент CSS3.

    a.sb.gradient.custom:after {
     background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9I
    jEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3
    BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ
    2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9Ij
    AlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI
    wJSIgc3RvcC1jb2xvcj0iI2I4YzZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3Rvc
    CBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDg4YjciIHN0b3Atb3BhY2l0eT
    0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkd
    Gg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSI
    gLz4KPC9zdmc+);
     background-image: -moz-linear-gradient(top,  #b8c6df 0%, #6d88b7 100%);
     background-image: -webkit-linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);
     background-image: linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);
    }

    Как создать свой собственный стиль

    Вы также можете переопределить стили по умолчанию в social-icons.css и создать свой собственный стиль. Следующий класс custom  переопределяет фоновое изображение.

    /* custom icon */
    a.sb .custom {
     width: 80px;
     height: 80px;
     
     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
    }
    a.sb.custom:after {
     background-image: url(images/custom-bg.png);

     -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
     border-radius: 15px;
    }

    /* custom icon blue */
    a.sb.custom.blue {
     border-color: #96a8af;
    }
    a.sb.custom.blue:after {
     background-image: url(images/custom-bg-blue.png);
    }
    /* custom icon pink */
    a.sb.custom.pink {
     border-color: #b0a1aa;
    }
    a.sb.custom.pink:after {
     background-image: url(images/custom-bg-pink.png);
    }

    /* custom icon background images */
    a.sb.custom.retweet {
     background-image: url(images/custom-icon-retweet.png);
    }
    a.sb.custom.photo {
     background-image: url(images/custom-icon-photo.png);
    }
    a.sb.custom.comment {
     background-image: url(images/custom-icon-comment.png);
    }

    Совместимость с браузерами

    Основные стили работают в любом браузере. CSS3-эффекты, таких как: закругленные углы, градиент, глянец, эффекты нажатия и тиснения, будут работать в любом браузере, который поддерживает CSS3, таких как Chrome, Firefox, Safari, Opera и IE9.

    Бесплатная лицензия

    Иконки 100% бесплатные и могут использоваться для любых целей. Вы можете делиться ими и изменять их.

    Перевод статьи с webdesignerwall.com


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

    Псевдоэлементы CSS before и after: особенности и примеры использования

    От автора: я должен признаться: мне нравятся псевдо-элементы CSS ::before и ::after. Они похожи на пару приспешников в каком-то модном приключении. В 3 раза больше силы. В 3 раза больше стилей. В 3 раза больше удивительные визуальных эффектов, которые вы можете создать.

    Вы никогда не окажетесь в одиночестве — потому что везде, где был один, теперь будут трое

    Что такое псевдо-элементы?

    Если вы никогда раньше не сталкивались с ::before и ::after, вы можете спросить: «Что это за псевдо-элемент, о котором вы говорите?»

    Вот 30-секундный обзор: Псевдоэлементы являются «воображаемыми» элементами, которые можно вставить в документ с помощью CSS. Например, если бы я написал очень простой CSS:

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    p::before { content: «Hello!»; }

    p::before {

      content: «Hello!»;

    }

    Внезапно перед каждым p контента страницы будет вставлено слово «Hello». Псевдо-элемент ::after похож на него, но размещается после контента.

    Свойство content определяет то, что они выводят, но эти элементы полностью стилизуемы — точно так же, как и любой другой элемент. Так что вам на самом деле не нужно размещать текстовое содержимое внутри. Фактически, многие из наиболее интересных применений полностью визуальны.

    Тем не менее, я хочу выделить одну распространенную ошибку, потому что я так много раз ее совершал. Многие из применений, которые мы будем исследовать, включают в себя графику, но не содержат реального содержимого из слов. Это замечательно, но вы должны установить и свойство content, и, если ваш контент пуст, свойство display — или псевдо-элемент не будет отображаться. Я наступал на эти грабли много раз… поэтому никогда не забывайте начинать с настройки контента. Если ваше использование полностью визуально, просто установите:

    content: «»; display: inline-block;

    content: «»;

    display: inline-block;

    Простое использование ::before и ::after

    Давайте начнем с некоторых простых способов использования ::before и ::after.

    Пользовательские иконки

    Одним простым и распространенным, но очень полезным использованием для ::before является добавление иконок к элементам определенного класса. Например, FontAwesome использует эту технику для реализации своих иконок. Вы можете использовать тот же подход, чтобы сделать свои собственные иконки.

    FontAwesome делает это с помощью собственного шрифта и свойства content, которое предоставляет преимущество автоматического изменения размера в зависимости от элемента, для которого оно задано. Если мы хотим использовать изображение, нам нужно явно указать его размер, иначе псевдоэлемент будет иметь размер 0 и не будет виден.

    Например, если бы я хотел, чтобы каждый элемент на странице с классом .kball отображал круг размером 30×30 с изображением моего профиля, я мог бы сделать что-то вроде этого:

    Цитаты

    Еще одно полезное использование ::before и ::after заключается в добавлении кавычек вокруг цитаты. Например, мы могли бы создать класс «quote», который применяет двойные кавычки до и после, и даже класс атрибуции, который добавляет в начале тире:

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    Есть множество других вещей, которые мы могли бы охватить в качестве обычного использования, но я хочу перейти к некоторым более захватывающим вещам.

    Продвинутое использование before и after

    Создание фигур

    Одной из проблем работы в HTML и CSS является ограниченное количество «базовых» фигур, с которыми вам приходится работать.

    По сути, каждый элемент является прямоугольником … и затем с помощью продвинутого использования border-radius и border вы можете либо округлить этот прямоугольник в овал или круг, либо наклонить углы и создать из него треугольник. Конечно, вы можете повернуть его, но это и все…

    Но теперь с ::before и ::after у вас есть в 3 раза больше «блоков» для экспериментов. Каждый из них может быть отдельно преобразован, расположен и повернут. Это приводит к феноменальному выбору фигур, которые вы можете создать с помощью чистого CSS.

    Крис Койер из CSS Tricks собрал здесь большую коллекцию возможных фигур, из которых я воспроизвел свои любимые, используя цветовую схему ZenDev.com. Верите или нет, это всего лишь 1 элемент HTML!

    Отображение значений атрибутов

    Еще одно очень крутое использование псевдо-элементов ::before или ::after — это отображение содержимого атрибута.
    Вы можете сделать это, включив в content — attr([attributename]).

    Например, если вы используете виджет на основе JavaScript, который хранит какое-то значение в качестве атрибута, вы можете автоматически отобразить этот атрибут без необходимости использовать какой-либо JavaScript для его просмотра!

    Одно из мест, где я использовал это раньше — это слайдер ZURB Foundation. Слайдер работает, изменяя значение в скрытом поле ввода… но что, если мы хотим сделать текущее значение видимым в самом слайдере? Элемент управления, которым мы манипулируем — это просто span… но он получает атрибут aria для текущего значения aria-valuenow. Ссылаясь на него в псевдо-элементе с помощью content: attr(aria-valuenow), мы можем отобразить его прямо на элементе управления.

    Многоступенчатая анимация

    Одним из самых интересных использований, которые я видел, является создание многоступенчатой анимации. Она еще раз используют тот факт, что псевдо-элементы дают вам целые дополнительные элементы для манипуляции в анимации. Вы можете анимировать основной элемент в одном направлении, а затем независимо анимировать каждый псевдо-элемент.

    Есть много интересных вещей, которые мы могли бы потенциально сделать с этим. Создавать супер крутые микровзаимодействия. В другом примере текстовое содержимое визуально скрыто и отображается при нажатии или наведении курсора.

    Завершение

    С помощью этих псевдо-элементов можно сделать так много, что трудно все это охватить. Это некоторые из примеров, которые я нахожу особенно захватывающими.

    Источник: //zendev.com

    Редакция: Команда webformyself.

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Узнать подробнее

    PSD to HTML

    Практика верстки сайта на CSS Grid с нуля

    Смотреть

    CSS-иконок

    Иконки можно легко добавить на вашу HTML-страницу с помощью библиотеки иконок.

    Как добавить значки

    Самый простой способ добавить значок на вашу HTML-страницу — использовать библиотеку значков, например Font Awesome.

    Добавьте имя указанного класса значка к любому встроенному элементу HTML (например, или ).

    Все значки в библиотеках значков ниже являются масштабируемыми векторами, которые могут настраиваться с помощью CSS (размер, цвет, тень и т. д.)

    Font Awesome Icons

    Чтобы использовать значки Font Awesome, перейдите в fontawesome.com, войдите в систему и получите код для добавления в раздел вашей HTML-страницы:

    Подробнее о том, как начать работу с Font Awesome, читайте в нашем Шрифт Потрясающий урок 5.

    Примечание: Загрузка или установка не требуется!

    Пример










    результат:

    Попробуй сам »

    Для получения полной информации обо всех значках Font Awesome посетите наш Справочник по значкам.

    Иконки начальной загрузки

    Чтобы использовать глификоны Bootstrap, добавьте следующую строку в раздел своей HTML-страницы:

    Примечание: Загрузка или установка не требуется!

    Пример










    результат:

    Попробуй сам »

    Google Иконки

    Чтобы использовать значки Google, добавьте следующую строку в раздел своей HTML-страницы:

    Примечание: Загрузка или установка не требуется!

    Пример





    облако
    избранное
    вложение
    компьютер
    трафик


    результат:

    Попробуй сам »

    Иконок — Материализовать

    Мы добавили 932 Иконки Материального Дизайна, любезно предоставленные Google.Вы можете скачать их прямо из спецификаций Material Design.

    Чтобы использовать эти значки, вы должны включить эту строку в часть вашего HTML-кода

    Чтобы использовать эти значки, используйте класс material-icons для элемента и укажите лигатуру в качестве текста содержание.

    Чтобы управлять размером значка, измените свойство font-size: 30px своего значка. При желании вы можете использовать предустановленные классы, как показано ниже.

    3d_ротация 3d_ротация

    ac_unit ac_unit

    access_alarm access_alarm

    access_alarms access_alarms

    access_time access_time

    доступность доступность

    доступный доступный

    account_balance account_balance

    account_balance_wallet account_balance_wallet

    account_box account_box

    account_circle account_circle

    адб адб

    прибавить прибавить

    add_a_photo add_a_photo

    add_alarm add_alarm

    add_alert add_alert

    add_box add_box

    add_circle add_circle

    add_circle_outline add_circle_outline

    add_location add_location

    add_shopping_cart add_shopping_cart

    add_to_photos add_to_photos

    add_to_queue add_to_queue

    отрегулировать отрегулировать

    airlines_seat_flat airlines_seat_flat

    airport_seat_flat_angled airlines_seat_flat_angled

    airport_seat_individual_suite airport_seat_individual_suite

    airport_seat_legroom_extra Airlines_seat_legroom_extra

    airport_seat_legroom_normal Airlines_seat_legroom_normal

    airport_seat_legroom_reduced airlines_seat_legroom_reduced

    airlines_seat_recline_extra Airlines_seat_recline_extra

    airlines_seat_recline_normal airlines_seat_recline_normal

    airplanemode_active airplanemode_active

    airplanemode_inactive airplanemode_inactive

    трансляция трансляция

    airport_shuttle airport_shuttle

    тревога тревога

    alarm_add alarm_add

    alarm_off alarm_off

    тревога_он тревога_в

    альбом альбом

    все включено все включено

    all_out all_out

    андроид андроид

    объявление объявление

    приложений приложений

    архив архив

    arrow_back arrow_back

    arrow_downward arrow_downward

    arrow_drop_down arrow_drop_down

    arrow_drop_down_circle arrow_drop_down_circle

    arrow_drop_up arrow_drop_up

    arrow_forward arrow_forward

    arrow_upward arrow_upward

    art_track art_track

    соотношение сторон соотношение сторон

    оценка оценка

    назначение назначение

    assignment_ind assignment_ind

    конец_записи конец_записи

    assignment_return assignment_return

    assignment_returned assignment_returned

    assignment_turned_in assignment_turned_in

    помощник помощник

    ассистент_фото ассистент_фото

    attach_file attach_file

    attach_money attach_money

    приставка приставка

    аудиотрек аудиотрек

    автообновление автообновление

    av_timer av_timer

    backspace backspace

    резервное копирование резервное копирование

    battery_alert battery_alert

    battery_charging_full battery_charging_full

    полная батарея полная батарея

    battery_std battery_std

    battery_unknown battery_unknown

    доступ к пляжу доступ к пляжу

    здесь здесь

    блок блок

    bluetooth bluetooth

    bluetooth_audio bluetooth_audio

    bluetooth_connected bluetooth_connected

    bluetooth_disabled bluetooth_disabled

    bluetooth_searching bluetooth_searching

    blur_circular blur_circular

    blur_linear blur_linear

    blur_off blur_off

    blur_on blur_on

    книга книга

    закладка закладка

    bookmark_border bookmark_border

    border_all border_all

    нижняя граница нижняя граница

    border_clear border_clear

    цвет границы цвет границы

    граница по горизонтали граница по горизонтали

    border_inner border_inner

    border_left border_left

    border_outer border_outer

    border_right border_right

    border_style border_style

    border_top border_top

    граница_вертикальная граница_вертикальная

    branding_watermark branding_watermark

    яркость_1 яркость_1

    яркость_2 яркость_2

    яркость_3 яркость_3

    яркость_4 яркость_4

    яркость_5 яркость_5

    яркость_6 яркость_6

    яркость_7 яркость_7

    яркость_авто яркость_авто

    яркость_высокая яркость_высокая

    яркость_низкая яркость_низкая

    яркость_среда яркость_среда

    broken_image broken_image

    щетка щетка

    bubble_chart bubble_chart

    bug_report bug_report

    сборка сборка

    burst_mode burst_mode

    бизнес бизнес

    бизнес_центр бизнес_центр

    кэшируется кэшируется

    торт торт

    звонок звонок

    call_end call_end

    call_made call_made

    call_merge call_merge

    call_missed call_missed

    call_missed_outgoing call_missed_outgoing

    call_received call_received

    call_split call_split

    call_to_action call_to_action

    камера камера

    camera_alt camera_alt

    camera_enhance camera_enhance

    camera_front camera_front

    camera_rear camera_rear

    camera_roll camera_roll

    отменить отменить

    card_giftcard card_giftcard

    card_membership card_membership

    card_travel card_travel

    казино казино

    литье литье

    cast_connected cast_connected

    center_focus_strong center_focus_strong

    center_focus_weak center_focus_weak

    change_history change_history

    чат чат

    chat_bubble chat_bubble

    chat_bubble_outline chat_bubble_outline

    чек чек

    check_box check_box

    check_box_outline_blank check_box_outline_blank

    check_circle check_circle

    левый шеврон левый шеврон

    chevron_right chevron_right

    присмотр за детьми присмотр за детьми

    дружелюбно к ребенку дружелюбно к ребенку

    chrome_reader_mode chrome_reader_mode

    класс класс

    прозрачный прозрачный

    clear_all clear_all

    закрыть закрыть

    closed_caption closed_caption

    облако облако

    cloud_circle cloud_circle

    cloud_done cloud_done

    cloud_download cloud_download

    cloud_off cloud_off

    cloud_queue cloud_queue

    cloud_upload cloud_upload

    код код

    коллекций коллекций

    collection_bookmark collections_bookmark

    color_lens color_lens

    раскрасить раскрасить

    комментарий комментарий

    сравнить сравнить

    compare_arrows compare_arrows

    компьютер компьютер

    номер_подтверждения номер_подтверждения

    contact_mail contact_mail

    contact_phone contact_phone

    контактов контактов

    content_copy content_copy

    content_cut content_cut

    content_paste content_paste

    контрольная_точка контрольная_почка

    control_point_duplicate control_point_duplicate

    авторское право авторское право

    создать создать

    create_new_folder create_new_folder

    кредитная карта кредитная карта

    урожай урожай

    урожай_16_9 урожай_16_9

    урожай_3_2 урожай_3_2

    урожай_5_4 урожай_5_4

    урожай_7_5 урожай_7_5

    Кроп_дин Кроп_дин

    Crop_free Crop_free

    Crop_landscape Crop_landscape

    исходный урожай исходный урожай

    Crop_portrait Crop_portrait

    crop_rotate crop_rotate

    кроп_квадрат кроп_квадрат

    панель приборов панель приборов

    data_usage data_usage

    диапазон_даты _диапазон_даты

    удалить дымку удалить дымку

    удалить удалить

    delete_forever delete_forever

    delete_sweep delete_sweep

    описание описание

    desktop_mac desktop_mac

    desktop_windows desktop_windows

    подробности подробности

    Плата разработчика Плата разработчика

    developer_mode developer_mode

    концентратор_устройства концентратор_устройства

    устройств устройств

    устройств_других устройств_других

    dialer_sip dialer_sip

    панель набора номера панель набора номера

    направлений направлений

    direction_bike direction_bike

    direction_boat direction_boat

    направления_шина направлений_шина

    направлений_автомобиль направлений_автомобиль

    железная дорога_ железная дорога

    direction_run direction_run

    direction_subway direction_subway

    направления_транзит направление_транзит

    direction_walk direction_walk

    полный диск полный диск

    днс днс

    do_not_disturb do_not_disturb

    do_not_disturb_alt do_not_disturb_alt

    do_not_disturb_off do_not_disturb_off

    do_not_disturb_on do_not_disturb_on

    док док

    домен домен

    выполнено выполнено

    готово_все готово_все

    пончик большой пончик большой

    пончик_маленький пончик_маленький

    чертежей чертежей

    ручка перетаскивания ручка перетаскивания

    drive_eta drive_eta

    видеорегистратор видеорегистратор

    редактировать редактировать

    edit_location edit_location

    извлечь извлечь

    электронная почта электронная почта

    расширенное_шифрование расширенное_шифрование

    эквалайзер эквалайзер

    ошибка ошибка ошибка

    error_outline error_outline

    евро_символ евро_символ

    ev_station ev_station

    событие событие

    event_available event_available

    event_busy event_busy

    event_note event_note

    event_seat event_seat

    exit_to_app exit_to_app

    expand_less expand_less

    expand_more expand_more

    явное явное

    изучить изучить

    экспозиции экспозиции

    Exposure_neg_1 Exposure_neg_1

    Exposition_neg_2 Extension_neg_2

    Exposition_plus_1 Extension_plus_1

    Exposition_plus_2 Exposure_plus_2

    ноль экспозиции ноль экспозиции

    добавочный добавочный

    лицевая лицевая

    fast_forward fast_forward

    fast_rewind fast_rewind

    избранное избранное

    любимая_ граница любимая_ граница

    Featured_play_list Featured_play_list

    избранное_видео избранное_видео

    обратная связь обратная связь

    fiber_dvr fiber_dvr

    fiber_manual_record fiber_manual_record

    fiber_new fiber_new

    fiber_pin fiber_pin

    fiber_smart_record fiber_smart_record

    file_download file_download

    file_upload file_upload

    фильтр фильтр

    фильтр_1 фильтр_1

    фильтр_2 фильтр_2

    фильтр_3 фильтр_3

    фильтр_4 фильтр_4

    фильтр_5 фильтр_5

    фильтр_6 фильтр_6

    filter_7 filter_7

    filter_8 filter_8

    filter_9 filter_9

    filter_9_plus filter_9_plus

    filter_b_and_w filter_b_and_w

    filter_center_focus filter_center_focus

    filter_drama filter_drama

    filter_frames filter_frames

    filter_hdr filter_hdr

    filter_list filter_list

    filter_none filter_none

    filter_tilt_shift filter_tilt_shift

    filter_vintage filter_vintage

    find_in_page find_in_page

    find_replace find_replace

    отпечаток пальца отпечаток пальца

    первая_страница первая_страница

    фитнес_центр фитнес_центр

    флаг флаг

    под отбортовку под отбортовку

    flash_auto flash_auto

    flash_off flash_off

    flash_on flash_on

    рейс рейс

    flight_land flight_land

    рейс_взлет рейс_взлет

    флип флип

    flip_to_back flip_to_back

    flip_to_front flip_to_front

    папка папка

    folder_open folder_open

    folder_shared folder_shared

    папка_специальная папка_специальная

    font_download font_download

    format_align_center format_align_center

    format_align_justify format_align_justify

    format_align_left format_align_left

    format_align_right format_align_right

    жирный_формат жирный_формат

    format_clear format_clear

    format_color_fill format_color_fill

    format_color_reset format_color_reset

    формат_цвет_текста формат_цвет_текст

    format_indent_decrease format_indent_decrease

    format_indent_increase format_indent_increase

    format_italic format_italic

    format_line_spacing format_line_spacing

    format_list_bulleted format_list_bulleted

    format_list_numbered format_list_numbered

    format_paint format_paint

    format_quote format_quote

    format_shapes format_shapes

    формат_размер формат_размер

    format_strikethrough format_strikethrough

    format_textdirection_l_to_r format_textdirection_l_to_r

    format_textdirection_r_to_l format_textdirection_r_to_l

    формат_подчеркнутый формат_подчеркнутый

    форум форум

    вперед вперед

    вперед_10 вперед_10

    вперед_30 вперед_30

    вперед_5 вперед_5

    бесплатный завтрак бесплатный завтрак

    полноэкранный полноэкранный

    полноэкранный_exit полноэкранный_exit

    функций функций

    g_translate g_translate

    геймпад геймпад

    игр игр

    молоток молоток

    жест жест

    get_app get_app

    gif gif

    гольф_курс гольф_курс

    gps_fixed gps_fixed

    gps_not_fixed gps_not_fixed

    gps_off gps_off

    марка марка

    градиент градиент

    зерно зерно

    graphic_eq graphic_eq

    grid_off grid_off

    сетка_на сетка_он

    группа группа

    group_add group_add

    group_work group_work

    hd hd

    hdr_off hdr_off

    hdr_он hdr_on

    hdr_strong hdr_strong

    hdr_weak hdr_weak

    гарнитура гарнитура

    headset_mic headset_mic

    исцеление исцеление

    слух слух

    справка справка

    help_outline help_outline

    высокое_качество высокое_качество

    изюминка изюминка

    highlight_off highlight_off

    история история

    дом дом

    гидромассажная ванна гидромассажная ванна

    гостиница гостиница

    песочные часы_ пустые песочные часы_ пустые

    полные песочные часы полные песочные часы

    http http

    https https

    изображение изображение

    image_aspect_ratio image_aspect_ratio

    import_contacts import_contacts

    import_export import_export

    important_devices important_devices

    входящие входящие

    indeterminate_check_box indeterminate_check_box

    информация информация

    info_outline info_outline

    вход вход

    insert_chart insert_chart

    insert_comment insert_comment

    файл_диск_вставки файл_диск_вставки

    insert_emoticon insert_emoticon

    insert_invitation insert_invitation

    insert_link insert_link

    insert_photo insert_photo

    invert_colors invert_colors

    invert_colors_off invert_colors_off

    iso iso

    клавиатура клавиатура

    keyboard_arrow_down keyboard_arrow_down

    keyboard_arrow_left keyboard_arrow_left

    keyboard_arrow_right keyboard_arrow_right

    keyboard_arrow_up keyboard_arrow_up

    keyboard_backspace keyboard_backspace

    keyboard_capslock keyboard_capslock

    keyboard_hide keyboard_hide

    keyboard_return keyboard_return

    keyboard_tab keyboard_tab

    keyboard_voice keyboard_voice

    кухня кухня

    этикетка этикетка

    label_outline label_outline

    пейзаж пейзаж

    язык язык

    ноутбук ноутбук

    ноутбук_chromebook ноутбук_chromebook

    ноутбук_mac ноутбук_mac

    ноутбук_windows ноутбук_windows

    last_page last_page

    запуск запуск

    слоев слоев

    Layers_clear Layers_clear

    Leak_add Leak_add

    leak_remove leak_remove

    линза линза

    добавление библиотеки добавление библиотеки

    библиотека_книги библиотека_книги

    library_music library_music

    lightbulb_outline lightbulb_outline

    line_style line_style

    line_weight line_weight

    linear_scale linear_scale

    ссылка ссылка

    подключенная камера подключенная камера

    список список

    live_help live_help

    live_tv live_tv

    local_activity local_activity

    local_airport local_airport

    local_atm local_atm

    local_bar local_bar

    local_cafe local_cafe

    local_car_wash local_car_wash

    local_convenience_store local_convenience_store

    local_dining local_dining

    local_drink local_drink

    local_florist local_florist

    местная_газовая_станция местная_газовая_станция

    local_grocery_store local_grocery_store

    местная_больница местная_больница

    local_hotel local_hotel

    local_laundry_service local_laundry_service

    local_library local_library

    local_mall local_mall

    local_movies local_movies

    местное_предложение местное_предложение

    local_parking local_parking

    local_pharmacy local_pharmacy

    local_phone local_phone

    local_pizza local_pizza

    local_play local_play

    local_post_office local_post_office

    local_printshop local_printshop

    local_see local_see

    local_shipping local_shipping

    local_taxi local_taxi

    location_city location_city

    location_disabled location_disabled

    location_off location_off

    расположение_на расположение_он

    location_searching location_searching

    замок замок

    lock_open lock_open

    lock_outline lock_outline

    образов образов

    look_3 look_3

    look_4 look_4

    look_5 look_5

    look_6 look_6

    look_one look_one

    look_two look_two

    петля петля

    луп луп

    низкий_приоритет низкий_приоритет

    лояльность лояльность

    почта почта

    mail_outline mail_outline

    карта карта

    markunread markunread

    markunread_mailbox markunread_mailbox

    память память

    меню меню

    merge_type merge_type

    сообщение сообщение

    микрофон микрофон

    mic_none mic_none

    mic_off mic_off

    мм мм

    mode_comment mode_comment

    mode_edit mode_edit

    монетизация_на монетизация_он

    money_off money_off

    монохромные_фотографии монохромные_фотографии

    настроение настроение

    mood_bad mood_bad

    подробнее подробнее

    more_horiz more_horiz

    more_vert more_vert

    мотоцикл мотоцикл

    мышь мышь

    move_to_inbox move_to_inbox

    фильм фильм

    movie_creation movie_creation

    movie_filter movie_filter

    multiline_chart multiline_chart

    music_note music_note

    music_video music_video

    my_location my_location

    природа природа

    природа_ люди природа_ люди

    navigate_before navigate_before

    navigate_next navigate_next

    навигация навигация

    near_me near_me

    network_cell network_cell

    network_check network_check

    network_locked network_locked

    сеть_wifi сеть_wifi

    new_releases new_releases

    следующая неделя следующая неделя

    NFC NFC

    без шифрования без шифрования

    no_sim no_sim

    не заинтересован не заинтересован

    примечание примечание

    note_add note_add

    уведомлений уведомлений

    notifications_active notifications_active

    notifications_none notifications_none

    notifications_off notifications_off

    notifications_paused notifications_paused

    offline_pin offline_pin

    ondemand_video ondemand_video

    непрозрачность непрозрачность

    open_in_browser open_in_browser

    open_in_new open_in_new

    open_with open_with

    страниц страниц

    просмотров просмотров

    палитра палитра

    pan_tool pan_tool

    панорама панорама

    Panorama_fish_eye Panorama_fish_eye

    панорама_горизонтальная панорама_горизонтальная

    панорама_вертикальная панорама_вертикальная

    широкий_угол панорамы широкоугольный_панорама

    party_mode party_mode

    пауза пауза

    pause_circle_filled pause_circle_filled

    pause_circle_outline pause_circle_outline

    платеж платеж

    человек человек

    чел ._контракт чел_контракт

    perm_camera_mic perm_camera_mic

    perm_contact_calendar perm_contact_calendar

    perm_data_setting perm_data_setting

    perm_device_information perm_device_information

    perm_identity perm_identity

    перм_медиа перм_медиа

    perm_phone_msg perm_phone_msg

    perm_scan_wifi perm_scan_wifi

    человек человек

    человек_добавить _персонал

    person_outline person_outline

    человек_пин человек_пин

    круг_контакта лица круг_контакта лица

    личное_видео личное_видео

    домашних животных домашних животных

    телефон телефон

    phone_android phone_android

    phone_bluetooth_speaker phone_bluetooth_speaker

    phone_forwarded phone_forwarded

    phone_in_talk phone_in_talk

    phone_iphone phone_iphone

    phone_locked phone_locked

    phone_missed phone_missed

    phone_paused phone_paused

    phonelink phonelink

    phonelink_erase phonelink_erase

    phonelink_lock phonelink_lock

    phonelink_off phonelink_off

    phonelink_ring phonelink_ring

    phonelink_setup phonelink_setup

    photo photo

    photo_album photo_album

    photo_camera photo_camera

    photo_filter photo_filter

    photo_library photo_library

    photo_size_select_actual photo_size_select_actual

    photo_size_select_large photo_size_select_large

    photo_size_select_small photo_size_select_small

    picture_as_pdf picture_as_pdf

    picture_in_picture picture_in_picture

    picture_in_picture_alt picture_in_picture_alt

    pie_chart pie_chart

    pie_chart_outlined pie_chart_outlined

    pin_drop pin_drop

    place place

    play_arrow play_arrow

    play_circle_filled play_circle_filled

    play_circle_outline play_circle_outline

    play_for_work play_for_work

    playlist_add playlist_add

    playlist_add_check playlist_add_check

    playlist_play playlist_play

    plus_one plus_one

    poll poll

    polymer polymer

    pool pool

    portable_wifi_off portable_wifi_off

    portrait portrait

    power power

    power_input power_input

    power_settings_new power_settings_new

    pregnant_woman pregnant_woman

    present_to_all present_to_all

    print print

    priority_high priority_high

    public public

    publish publish

    query_builder query_builder

    question_answer question_answer

    queue queue

    queue_music queue_music

    queue_play_next queue_play_next

    radio radio

    radio_button_checked radio_button_checked

    radio_button_unchecked radio_button_unchecked

    rate_review rate_review

    receipt receipt

    recent_actors recent_actors

    record_voice_over record_voice_over

    redeem redeem

    redo redo

    refresh refresh

    remove remove

    remove_circle remove_circle

    remove_circle_outline remove_circle_outline

    remove_from_queue remove_from_queue

    remove_red_eye remove_red_eye

    remove_shopping_cart remove_shopping_cart

    reorder reorder

    repeat repeat

    repeat_one repeat_one

    replay replay

    replay_10 replay_10

    replay_30 replay_30

    replay_5 replay_5

    reply reply

    reply_all reply_all

    report report

    report_problem report_problem

    restaurant restaurant

    restaurant_menu restaurant_menu

    restore restore

    restore_page restore_page

    ring_volume ring_volume

    room room

    room_service room_service

    rotate_90_degrees_ccw rotate_90_degrees_ccw

    rotate_left rotate_left

    rotate_right rotate_right

    rounded_corner rounded_corner

    router router

    rowing rowing

    rss_feed rss_feed

    rv_hookup rv_hookup

    satellite satellite

    save save

    scanner scanner

    schedule schedule

    school school

    screen_lock_landscape screen_lock_landscape

    screen_lock_portrait screen_lock_portrait

    screen_lock_rotation screen_lock_rotation

    screen_rotation screen_rotation

    screen_share screen_share

    sd_card sd_card

    sd_storage sd_storage

    search search

    security security

    select_all select_all

    send send

    sentiment_dissatisfied sentiment_dissatisfied

    sentiment_neutral sentiment_neutral

    sentiment_satisfied sentiment_satisfied

    sentiment_very_dissatisfied sentiment_very_dissatisfied

    sentiment_very_satisfied sentiment_very_satisfied

    settings settings

    settings_applications settings_applications

    settings_backup_restore settings_backup_restore

    settings_bluetooth settings_bluetooth

    settings_brightness settings_brightness

    settings_cell settings_cell

    settings_ethernet settings_ethernet

    settings_input_antenna settings_input_antenna

    settings_input_component settings_input_component

    settings_input_composite settings_input_composite

    settings_input_hdmi settings_input_hdmi

    settings_input_svideo settings_input_svideo

    settings_overscan settings_overscan

    settings_phone settings_phone

    settings_power settings_power

    settings_remote settings_remote

    settings_system_daydream settings_system_daydream

    settings_voice settings_voice

    share share

    shop shop

    shop_two shop_two

    shopping_basket shopping_basket

    shopping_cart shopping_cart

    short_text short_text

    show_chart show_chart

    shuffle shuffle

    signal_cellular_4_bar signal_cellular_4_bar

    signal_cellular_connected_no_internet_4_bar signal_cellular_connected_no_internet_4_bar

    signal_cellular_no_sim signal_cellular_no_sim

    signal_cellular_null signal_cellular_null

    signal_cellular_off signal_cellular_off

    signal_wifi_4_bar signal_wifi_4_bar

    signal_wifi_4_bar_lock signal_wifi_4_bar_lock

    signal_wifi_off signal_wifi_off

    sim_card sim_card

    sim_card_alert sim_card_alert

    skip_next skip_next

    skip_previous skip_previous

    slideshow slideshow

    slow_motion_video slow_motion_video

    smartphone smartphone

    smoke_free smoke_free

    smoking_rooms smoking_rooms

    sms sms

    sms_failed sms_failed

    snooze snooze

    sort sort

    sort_by_alpha sort_by_alpha

    spa spa

    space_bar space_bar

    speaker speaker

    speaker_group speaker_group

    speaker_notes speaker_notes

    speaker_notes_off speaker_notes_off

    speaker_phone speaker_phone

    spellcheck spellcheck

    star star

    star_border star_border

    star_half star_half

    stars stars

    stay_current_landscape stay_current_landscape

    stay_current_portrait stay_current_portrait

    stay_primary_landscape stay_primary_landscape

    stay_primary_portrait stay_primary_portrait

    stop stop

    stop_screen_share stop_screen_share

    storage storage

    store store

    store_mall_directory store_mall_directory

    straighten straighten

    streetview streetview

    strikethrough_s strikethrough_s

    style style

    subdirectory_arrow_left subdirectory_arrow_left

    subdirectory_arrow_right subdirectory_arrow_right

    subject subject

    subscriptions subscriptions

    subtitles subtitles

    subway subway

    supervisor_account supervisor_account

    surround_sound surround_sound

    swap_calls swap_calls

    swap_horiz swap_horiz

    swap_vert swap_vert

    swap_vertical_circle swap_vertical_circle

    switch_camera switch_camera

    switch_video switch_video

    sync sync

    sync_disabled sync_disabled

    sync_problem sync_problem

    system_update system_update

    system_update_alt system_update_alt

    tab tab

    tab_unselected tab_unselected

    tablet tablet

    tablet_android tablet_android

    tablet_mac tablet_mac

    tag_faces tag_faces

    tap_and_play tap_and_play

    terrain terrain

    text_fields text_fields

    text_format text_format

    textsms textsms

    texture texture

    theaters theaters

    thumb_down thumb_down

    thumb_up thumb_up

    thumbs_up_down thumbs_up_down

    time_to_leave time_to_leave

    timelapse timelapse

    timeline timeline

    timer timer

    timer_10 timer_10

    timer_3 timer_3

    timer_off timer_off

    title title

    toc toc

    today today

    toll toll

    tonality tonality

    touch_app touch_app

    toys toys

    track_changes track_changes

    traffic traffic

    train train

    tram tram

    transfer_within_a_station transfer_within_a_station

    transform transform

    translate translate

    trending_down trending_down

    trending_flat trending_flat

    trending_up trending_up

    tune tune

    turned_in turned_in

    turned_in_not turned_in_not

    tv tv

    unarchive unarchive

    undo undo

    unfold_less unfold_less

    unfold_more unfold_more

    update update

    usb usb

    verified_user verified_user

    vertical_align_bottom vertical_align_bottom

    vertical_align_center vertical_align_center

    vertical_align_top vertical_align_top

    vibration vibration

    video_call video_call

    video_label video_label

    video_library video_library

    videocam videocam

    videocam_off videocam_off

    videogame_asset videogame_asset

    view_agenda view_agenda

    view_array view_array

    view_carousel view_carousel

    view_column view_column

    view_comfy view_comfy

    view_compact view_compact

    view_day view_day

    view_headline view_headline

    view_list view_list

    view_module view_module

    view_quilt view_quilt

    view_stream view_stream

    view_week view_week

    vignette vignette

    visibility visibility

    visibility_off visibility_off

    voice_chat voice_chat

    voicemail voicemail

    volume_down volume_down

    volume_mute volume_mute

    volume_off volume_off

    volume_up volume_up

    vpn_key vpn_key

    vpn_lock vpn_lock

    wallpaper wallpaper

    warning warning

    watch watch

    watch_later watch_later

    wb_auto wb_auto

    wb_cloudy wb_cloudy

    wb_incandescent wb_incandescent

    wb_iridescent wb_iridescent

    wb_sunny wb_sunny

    wc wc

    web web

    web_asset web_asset

    weekend weekend

    whatshot whatshot

    widgets widgets

    wifi wifi

    wifi_lock wifi_lock

    wifi_tethering wifi_tethering

    work work

    wrap_text wrap_text

    youtube_searched_for youtube_searched_for

    zoom_in zoom_in

    zoom_out zoom_out

    zoom_out_map zoom_out_map

    Adding Icons to your webpage with CSS | CSS Tutorial

    Icons make the content on your website more visual.Как правило, значки используются в кнопках рядом с текстом, в меню навигации или рядом с некоторой важной информацией. Раньше, когда кому-то приходилось использовать значок на своей веб-странице, они сначала загружали значок, а затем добавляли тег img с путем к значку как src , чтобы отобразить значок.

    Больше нет, благодаря некоторым удивительным шрифтам со значками, таким как Font Amazing , Google Material Icons и Bootstrap Icons , с помощью которых мы можем напрямую использовать значки, не загружая и не устанавливая ничего.

    Кроме того, когда мы загружаем и используем любой значок, размер изображения значка фиксируется, поэтому при большем разрешении экрана оно становится размытым. Кроме того, если вам нужен один значок трех цветов, вам необходимо загрузить 3 разных изображения значков.

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

    Font Awesome → сайт

    Чтобы использовать библиотеку Font awesome на нашей веб-странице, нам нужно добавить следующий код в тег head .

    Приведенная выше строка кода включает файл CSS для Font Awesome с сервера CDN, и теперь мы можем добавлять значки следующим образом:

    Живой пример →

    Google Material Icons → сайт

    Чтобы использовать библиотеку значков Google Material на нашей веб-странице, нам нужно добавить следующий код в тег head .

    Приведенная выше строка кода включает файл CSS для значков материалов Google с сервера API Google, и теперь мы можем добавлять значки следующим образом: 

       подарочная_карточка 
 отпечаток пальца 
 место

    Живой пример →

    Значки Google Material готовы к работе с мобильными устройствами и основаны на теме Android Material.

    Bootstrap Icons → сайт

    Чтобы использовать библиотеку значков Bootstrap 3.x на нашей веб-странице, нам нужно добавить следующий код в тег head .

    Приведенная выше строка кода включает файл CSS для значков начальной загрузки с сервера MaxCDN, и теперь мы можем добавлять значки следующим образом:

    Живой пример →

    CSS-иконок

    Как добавить значки

    Самый простой способ добавить значок на вашу HTML-страницу - использовать библиотеку значков, например Font Awesome.

    Добавьте имя указанного класса значка к любому встроенному элементу HTML (например, или ).

    Все значки в библиотеках значков ниже являются масштабируемыми векторами, которые могут настраиваться с помощью CSS (размер, цвет, тень и т. д.)

    Font Awesome Icons

    Чтобы использовать значки Font Awesome, добавьте следующую строку в раздел своей HTML-страницы:

    Примечание: Загрузка или установка не требуется!

    Пример










    результат:

    Попробуй сам "

    Иконки начальной загрузки

    Чтобы использовать глификоны Bootstrap, добавьте следующую строку в раздел своей HTML-страницы:

    Примечание: Загрузка или установка не требуется!

    Пример










    результат:

    Попробуй сам "

    Google Иконки

    Чтобы использовать значки Google, добавьте следующую строку в раздел своей HTML-страницы:

    Примечание: Загрузка или установка не требуется!

    Пример





    облако
    избранное
    вложение
    компьютер
    трафик


    результат:

    Попробуй сам "

    Как использовать значки font awesome в качестве кода содержимого CSS

    Чтобы использовать значки font awesome в качестве кода содержимого CSS, выполните следующие действия.

    1. Добавьте уникальное имя класса CSS к элементу значка, который вы хотите использовать.
    2. Установите для семейства шрифтов значение «Font Awesome 5 Free» (для обычных, сплошных значков), «Font Awesome 5 Pro» (если вы покупаете профессиональную лицензию) или «Font Awesome 5 Brands» (для значков брендов)
    3. Установите для свойства CSS font-weight значение 900 (для твердых), 400 (для обычных или фирменных), 300 (для легких для профессиональных значков).
    4. Установите для свойства css содержимого значение шрифта awesome значка в кодировке Unicode.
    5. И, если необходимо, добавьте общее имя класса CSS для всех элементов значков, например «font-awesome-icons» (это необходимо для добавления вашего собственного CSS к значкам).

    Например, чтобы отобразить значок facebook с помощью кода содержимого CSS, используйте приведенный ниже фрагмент кода. 

      
  • 
  Войти

    • 


.facebook :: before {
    семейство шрифтов: «Font Awesome 5 Brands»;
font-weight: 400;
содержание: "\ f09a";
}

    Зачем использовать код содержимого CSS для отображения значков с потрясающим шрифтом?

    Обычный подход требует, чтобы мы изменили все имена элементов значков на шрифтовые отличные имена значков, такие как fa-facebook, а также добавили имена классов категорий fab, far и fas.

    Если ваш проект новый, то мы можем следить за ним.

    Но если это уже существующий проект, очень сложно изменить имя класса значка.

    В этом случае мы можем отображать значки font awesome, используя их значения содержимого CSS.

    Мы можем использовать свойства псевдоэлементов CSS :: before или :: after для их отображения.

    Например, чтобы отобразить значок Twitter, мы могли бы использовать нижеприведенный HTML-код. 

      
  • 
  твиттер

    •

    Итак, мы можем добавить свойства CSS значка font awesome icon к существующему значку twitter 

     .twitter :: before {
    семейство шрифтов: «Font Awesome 5 Brands»;
font-weight: 400;
содержание: "\ f099";
}

    Я дал контент как \ f099 , который является значением Unicode для значка Twitter, определяемого значками font awesome.

    Для всех 1598 иконок с бесплатными шрифтами значения Unicode уже определены.

    И далее, чтобы добавить наш собственный CSS к значкам, мы можем добавить к значкам общий класс, скажем, «font-awesome-icons».

    Я добавил цвет : красный к значкам и нескольким другим свойствам CSS.

      .font-awesome-icons :: before {
    дисплей: встроенный блок;
    стиль шрифта: нормальный;
    вариант шрифта: нормальный;
    рендеринг текста: авто;
    красный цвет;
    -webkit-font-smoothing: сглаживание;
  }

    Теперь наши значки будут отображаться красным цветом. 

      
  • 
  твиттер

    • 

.font-awesome-icons :: before {
    дисплей: встроенный блок;
    стиль шрифта: нормальный;
    вариант шрифта: нормальный;
    рендеринг текста: авто;
    красный цвет;
    -webkit-font-smoothing: сглаживание;
}

.twitter :: before {
    семейство шрифтов: «Font Awesome 5 Brands»;
font-weight: 400;
содержание: "\ f099";
}

    Font awesome css content не работает

    Если вы выполните описанные выше шаги, код содержимого font awesome css должен работать нормально.

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

    Итак, чтобы отображать иконки с потрясающими шрифтами, используя их код содержимого CSS

    1. Не забудьте добавить семейство шрифтов
    2. Добавьте font-weight.
    тип Icon семейство шрифтов начертание шрифта
    Solid Шрифт Высокий 5 Free 900
    Regular Шрифт Высокий 5 Free 400
    Марка Font Awesome 5 Brands 400

    Если вы используете профессиональные значки, вам нужно добавить семейство шрифтов как «Font Awesome 5 Pro» для обычных, сплошных значков.

    Шрифт Metro Icon - Metro 4 :: Популярные библиотеки HTML, CSS и JS

    Metro Icon Font предоставляет масштабируемые векторные иконки, которые можно мгновенно настроить - размер, цвет, тень и все, что можно сделать с помощью CSS. Шрифт Metro Icon включает более 500 иконок.

    Как использовать

    Чтобы активировать шрифт Metro Icon Font, вы должны использовать metro-all.css или добавьте на страницу metro-icons.css .

    И они добавляют класс mif- * к элементу, например span И для изменения размера значка добавляют класс mif-lg , mif-2x , mif-3x , mif-4x и mif- 5x

    Цвет значка

    Чтобы изменить цвет, добавьте к элементу значка класс fg- * .Подробнее о цветах см. На странице утилит для работы с цветами.

    Список значков

    0

    Вт3.CSS Иконки

    Библиотеки значков

    С W3.CSS вы можете использовать любую библиотеку значков, например:

    • Font Awesome Иконки
    • Иконки Google Material Design
    • Иконки начальной загрузки

    Использование библиотеки значков

    Для вставки значка:

    1. Включите библиотеку значков из CDN (сети доставки контента) в раздел .
    2. Добавьте имя класса значка к любому встроенному элементу HTML.

    Совет: Элементы и широко используются для добавления иконы.

    Для управления размером значка измените свойство font-size значка или используйте один из w3- размер классы:

    • w3-крошечный
    • w3-малый
    • w3-большой
    • w3-xxlarge
    • w3-xxxlarge
    • W3-Jumbo

    Некоторые иконки Font Awesome


    fa fa-home


    fa fa-bar


    fa fa-стрелка-влево


    fa fa-стрелка вправо


    fa fa-search


    fa fa-close


    fa fa-refresh


    fa fa-trash


    fa fa-male


    fa fa-car


    fa fa-грузовик


    fa fa-plane

    Пример



    W3.CSS






    Попробуй сам "

    Некоторые значки Google Material Design

    дом
    дом

    меню
    меню

    arrow_back
    arrow_back

    arrow_forward
    arrow_forward

    поиск
    поиск

    закрыть
    закрыть

    обновить
    обновить

    удалить
    удалить

    человек
    человек

    направлений_автомобиль
    направлений_автомобиль

    local_shipping
    local_shipping

    local_airport
    local_airport

    Пример



    W3.
    Оставить комментарий

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    © 2019 Штирлиц Сеть печатных салонов в Перми

    Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.

    Карта сайта