Иконки в самом тексте
Не в тесте, а в теКсте, и я говорю не про смайлики 🙃
Это часто встречающаяся задача например в интернет-магазинах в блоке “контакты”, где по стандарту телефон, почту и время работы оформляют иконками
Какие есть варианты
Самое простое что можно сделать – это вставить иконку как изображение .jpg, .png
<img href="/images/icomoon/SVG/ruby.svg"></img>
Очень модный приём вставки иконок Font Awesome
- Скачайте иконки в формате шрифта
- Расположите файлы шрифта в директории сайта*
- Добавьте файлы стилей FontAwesome в теги
<head> - Укажите в своём файле стилей
.cssподключение шрифта
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?4sisvj');
src: url('fonts/icomoon.eot?4sisvj#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?4sisvj') format('truetype'),
url('fonts/icomoon.woff?4sisvj') format('woff'),
url('fonts/icomoon.svg?4sisvj#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
*Тут главное не запутатся с относительными путями После чего можем использовать HTML код для получения результата. Вот интересный пример: приведённый ниже код отображает данный символ — )
<span class="icon icon-font"></span>
Тестируем
На практике возникает проблема позиционирования, так как высота картинки не часто совпадает с высотой текста:
| ubuntu |
Позиционирвание
Вертикальное выравнивание сделаем с помощью редко используемого свойства vertical-align
Например:
.icon-ubuntu:before {
content: "\ec58";
color: #e95420;
vertical-align: middle; /* по середине */
/* vertical-align: top; по верхнюю границу */
/* vertical-align: bottom; по нижнюю границу */
}Отступы справа и слева, как обычно “маржинами”, например:
.icon-ubuntu {
padding: 0 15px;
}Попробуте, должно получиться ровно и красиво!
| ubuntu |
Пишите мне в telegram @klimovrv