Таблица пиктограмм HTML, содержит более 100 популярных иконок для оформления контента веб-страниц, рассылок и текстов. Воспользуйтесь удобной навигацией по категориям или перейдите сразу к таблице символов.
Специальные пиктограммы HTML позволяют оформить текст письма или тему рассылки. Помогают использовать иконки для кнопок и ссылок на сайте. Чтобы разместить символ на странице, необходимо скопировать код символа и вставить в исходный HTML-код страницы.
Спецсимволы чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице.
Оформление текста
| ✓ | Символ галочка | |
| ✔ | Жирная галочка | |
| ☑ | Галочка в квадрате | |
| ☒ | Крестик в квадрате | |
| ☓ | Крест | |
| ✅ | Жирная незакрашенная галочка | |
| ✕ | Крестик | |
| ✖ | Жирный крестик | |
| ✗ | Изогнутый кретик | |
| ✘ | Жирный изогнутый крестик |
Офисные предметы
| ✆ | Знак телефона с проводом | |
| Телефонная трубка | ||
| Телефонная трубка левосторонняя | ||
| Телефонная трубка правосторонняя | ||
| ☎ | Телефон закрашенный | |
| ☏ | Телефон прозрачный | |
| Черный кнопочный телефон | ||
| Мобильный телефон | ||
| ☕ | Чашка чая / кофе | |
| ✄ | Ножницы | |
| ✃ | Ножницы | |
| ✉ | Конверт или письмо | |
| ✍ | Рука с ручкой | |
| Дискета | ||
| Лупа (наклонённая влево) | ||
| Лупа (наклонённая вправо) | ||
| Отрывной календарь | ||
| Портфель |
Источник: konstantinbulgakov.com
Камеди Клаб «Американское радио» Гарик Мартиросян, Гарик Харламов, Андрей Скороход,Тимур Батрутдинов
Иконки соц. сетей для сайта
Уже трудно себе представить современный сайт без иконок соц. сетей и мы их видим на большинстве сайтах. Откуда же берутся эти иконки? Насчет этого можно не беспокоиться, в сети распространяется огромное количество наборов бесплатных иконок на любой вкус в виде картинок.
Другой вопрос подходят ли они по стилю для вашего сайта, не отвлекают ли от контента? А сами то Вы как думаете, когда видите красно-сине-зеленые ляпистые кнопки, одинаковые на всех сайтах, как в инкубаторе.
Где скачать иконки? Значки Windows, Ютуб, ВК, Инстаграм. Более 3 млн иконок на любую тему
В любом случае, если ваш сайт претендует хоть на какой-то дизайнерский стиль, то и иконки соц. сетей тоже должны стремиться к единообразию с дизайном сайта.
Иконочный шрифт Font Awesome
как нельзя кстати хорошо подходит для создания иконок соц. сетей на сайте. Давайте рассмотрим все преимущества:
- легкость внедрения в проект
- масштабируются без потери качества
- не создают http-запросов к серверу
- большой выбор векторных иконок
- легко стилизовать под свой дизайн
Сделаем HTML разметку
Создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. В каждый пункт списка li поместим блок dlv с классом icon, внутри которых теги i с классами нужных вам иконок.
На сайте fontawesome.com, находим нужные иконки и копируем код в свой HTML-файл.
Подключаем иконочный шрифт, путем копирования строки с кодом и вставки между тегами head.
Иконки соц. сетей появились на странице, теперь предстоит их стилизация.
CSS-код
Разместим иконки в центре, для этого пропишем контейнеру с классом box код ниже.
.box text-align: center;
Убираем у списков ul маркеры и задаем отступ сверху 60 пикселей.
.box ul list-style: none;
margin-top: 60px;
>
Прорисовываем блоки списка с заданной шириной и высотой, белого цвета с рамкой под цвет фон. Она не должна быть видна в обычном состоянии, а будет появляться более темного цвета только при наведении курсора.
.box ul li width: 40px;
height: 40px;
background: #fff;
border: solid 4px #ea86c6;
>
Отобразим список в строку: display: inline-block;
На картинке иконки стоят не по центру, маленького размера и неправильного цвета.
Работа с классом icon
Опускаем иконки на 15% вниз:
Задаем цвет такой же как у фона страницы и увеличиваем размер в любых относительных единицах. Это позволит на супер больших мониторах, не потерять в качестве.
color: #ea86c6;
font-size: 1.7em;
Можно было бы на этом остановиться, но тогда зачем мы делали рамку у пунктов списка?
Hover эффект для иконок
Создадим hover эффект, при котором при наведении курсора, у рамок меняться цвет.
.box ul li:hover border: solid 4px #b63a64;
>
У иконок изменится цвет и увеличится размер:
.box ul li:hover .icon font-size: 1.5em;
color: #b63a64;
>
Демонстрация hover эффекта
Плавность hover эффекта достигается свойству transition. На codepen вы можете посмотреть, каким элементам это свойство задано.
Создано 20.06.2018 10:22:30
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Источник: myrusakov.ru
Saved searches
Use saved searches to filter your results more quickly
Cancel Create saved search
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window.
Reload to refresh your session.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Icon request: icon-ok / icon-ok-sign (icon-odnoklassniki) #1685
antonkorda opened this issue Jul 31, 2013 · 179 comments
Icon request: icon-ok / icon-ok-sign (icon-odnoklassniki) #1685
antonkorda opened this issue Jul 31, 2013 · 179 comments
antonkorda commented Jul 31, 2013
This is a request for a brand icon for Odnoklassniki — russian social network (translation — Classmates).
Font awesome has a lot of social networks icons, but this one is still missing. I think it would be useful for russia federation and other countries who work with russian people, because it’s second popular social network in this region, after VK (vk logo already included in font-awesome).
This social network has a very simple logo with O and K letters under each other, which form something like human silhouette:
Here is an sign icon example:
I found a lot of resourses with this logo in .eps format, here some:
Sorry if I did mistakes, english is not my native language.
I use font awesome with pleasure and will be very appreciated if you include this social network logo in next version of FA.
The text was updated successfully, but these errors were encountered:
Источник: github.com