Использование FontAwesome  4.7.0

Что такое FontAwesome?

Font Awesome — это масштабируемые векторные иконки, то-есть современная альтернатива устаревшим иконкам png, которые вы с легкостью можете персонализировать — размер иконки, цвет, тени и все, что можно сделать силами CSS и что самое важное — все эти кастомизации происходят без потери качества!.

---

Скачать FontAwesome  4.7.0

---

Как подключить:

Загрузите на ваш сервер файлы из скачанного архива (папка fonts, файл .css.), затем
В < head > вашего html укажите ссылку на ваш font-awesome.min.css.

Готово, теперь немного инструкций…

---

Использование FontAwesome  4.7.0 в HTML

Использовать можно следующим образом:

Где

fa-glass

Это имя самой иконки из списка ниже.

На выходе получаем это:

Готово.

---

Использование FontAwesome  4.7.0 в CSS

Следующим кодом иконки можно использовать в в текстовых полях input или же кнопках button

.element {
    position: relative;
}
.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;
}

Где

content: "\f000";

Указан номер элемента (\f000) из следующего списка.

---