Работа с иконками | 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. Комбинация иконок
<!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
Устанавливаем favicon на сайт
Быстрая навигация по этой странице:
- Зачем нужен favicon?
- Каким должен быть файл с иконкой и где он должен находиться?
- Как добавить на сайт?
Вопрос о том, как установить фавикон на сайт, является достаточно простым, однако почему-то многие вебмастера этим вопросом пренебрегают и не устанавливают иконку для своего сайта.
О том, почему все-таки это важно и как это правильно сделать — читайте ниже.
Зачем нужен favicon?
Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).
Однако в действительности роль этой картинки состоит не только в украшении браузера. Дело в том, что эти картинки выводятся в поисковой выдаче Яндекса (если иконка не задана — показывается пустое место). Представьте ситуацию, что Яндекс предложит пользователю на его запрос два примерно одинаковых сайта, но к одному из них будет дополнительно проставлена иконка — на какой сайт более вероятно перейдет пользователь? Конечно, в первую очередь он перейдет на сайт, предложенный первым по списку, но как раз именно наличие картинки, которая всегда более приятна пользователю, чем текст, может привлечь посетителя именно на ваш сайт.
Кроме того, нельзя исключать и того обстоятельства, что наличие или отсутствие фавиконки может учитываться Яндексом как один из незначительных факторов ранжирования. Достоверно это неизвестно, но если Яндекс учитывает более 300 различных факторов при ранжировании сайтов в поисковой выдаче, то, быть может, наличие иконки также может учитываться при определении качественности ресурса.
Таким образом, если вы делаете хороший и качественный сайт, то иконка у него обязательно должна быть проставлена.
Про то, как сделать иконку ico, у нас есть отдельная статья (ссылка), потому перейдем сразу к рассмотрению вопроса о том, каким должен быть фавикон.
Каким должен быть файл с иконкой и где он должен находиться?
Исторически сложилось, что для сайтов используется формат .ico. Особенность этого формата состоит в том, что внутри одного .ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.
Соответствующий Файл в формате .ico можно создать с помощью графического редактора или множества доступных в сети онлайн-сервисов. Важно, чтобы данный файл имел название favicon.ico.
Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.
Как добавить на сайт?
Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.
Для добавления favicon html код является следующим:
[html]
<link rel=»icon» href=»http://vash-site.ru/favicon.ico» type=»image/x-icon» />
<link rel=»shortcut icon» href=»http://vash-site.ru/favicon.ico» type=»image/x-icon» />
[/html]
После того, как добавите этот код на страницы своей странички, обновите кэш своего браузера (его нужно полностью стереть), и, если все сделано правильно и файл с картинкой загружен на сайт, то картинка начнет отображаться в браузере.
Правда, не ждите ее мгновенного отображения в поисковой выдаче Яндекса. Дело в том, что у этой поисковой системы для фавиконок существует отдельный робот, который может обновлять свою базу иконок на протяжении нескольких месяцев. В этой связи, ваша иконка может появиться в выдаче Яндекса как через две недели, так и через пару месяцев, волноваться по этому поводу не стоит.
Как создать и добавить фавикон
Что такое фавикон и как его получить?
Они присутствуют каждый раз, когда вы выходите в Интернет и посещаете свои любимые веб-сайты, но вы, возможно, даже не замечали их. Фавиконы, или избранные значки, — это небольшие значки, которые, в зависимости от вашего браузера, могут отображаться рядом с названием веб-сайта или URL-адресом в адресной строке, вкладке и/или панели закладок браузера. Обычно это логотипы или другие графические изображения компании или организации.
У нас красная буква «е».
Поскольку я использую Google Chrome, значки отображаются как на вкладке браузера, так и на панели закладок.
Почему фавиконки важны?
Вы, вероятно, не будете включать их в свой бизнес-план или слышать о них на сетевом мероприятии (если только вам не посчастливится поговорить со мной; извините заранее), но фавиконки — важная часть вашего веб-сайта.
Эти крошечные значки, обычно размером всего 16 на 16 пикселей, предоставляют еще одну возможность брендинга для вашей компании, позволяя видеть ваш логотип или значок, когда пользователи открывают ваш веб-сайт, даже если они работают на другой вкладке. Как и в случае с типографикой и выбором цвета, выбор и размещение фавиконки на вашем веб-сайте должно быть частью вашей стратегии онлайн-брендинга.
Если вы чем-то похожи на меня, у вас никогда не будет открыта только одна вкладка в браузере. В любой рабочий день у меня открыто в среднем 10 вкладок, когда я работаю над разными проектами или ищу решения в Интернете.
Фавиконы помогают улучшить взаимодействие с пользователем, выделяя вкладку вашего веб-сайта среди множества других. Любая стратегия, которая дает пользователям веб-сайта положительный опыт работы с вашей компанией, является хорошей.
Создание фавикона
Существует два способа создания фавикона для вашего веб-сайта: вы можете использовать генератор или программное обеспечение для редактирования фотографий.
В сети доступны десятки генераторов. Поэкспериментируйте, чтобы найти вариант с требованиями и результатами, которые вам подходят.
Я использую Adobe Photoshop для создания фавиконов, но подойдет почти любая платная или бесплатная программа для редактирования фотографий.
Первое решение, которое вам нужно принять, это то, какой будет ваша иконка. Поскольку у вас есть только небольшое пространство для работы, использование всего вашего логотипа или названия компании может быть не лучшим вариантом. Если бы мы использовали весь наш логотип, он был бы нечитаемым и, следовательно, бесполезным.
Мы решили использовать красную букву «е», потому что это узнаваемая и простая часть нашего логотипа.
Сначала я открыл наш логотип в Photoshop и обрезал его так, чтобы он содержал только ту часть, которую я хотел для нашего логотипа. Используйте логотип или графику с прозрачным фоном для достижения наилучших результатов. ( Пользователи WordPress : Хотя ваш значок будет иметь размер 16 на 16 пикселей, WordPress предлагает окончательный размер 512 пикселей на 512 пикселей, поэтому начните с большого изображения.)
Вам понадобится квадратное изображение для ваш фавикон. Отцентрируйте значок на холсте, а затем отрегулируйте холст по мере необходимости.
Мой значок был слишком высоким, поэтому я уменьшил высоту своего холста до 1070 пикселей, используя параметр размера холста. Обратите внимание, что вам может понадобиться добавить или вычесть ширину или высоту, чтобы избежать обрезки части вашего значка.
Теперь, когда ваш фавикон стал квадратным, вам нужно изменить его размер.
Если вы являетесь пользователем WordPress , измените размер изображения на 512 на 512 пикселей и сохраните его в формате PNG. Если вы собираетесь добавить значок в код своего веб-сайта, измените размер изображения до 16 на 16 пикселей и сохраните его как favicon.ico.
Добавление фавикона на сайт WordPress
В WordPress очень легко добавить значок фавикона на ваш сайт. Сначала войдите в панель администратора WordPress. В пункте меню «Внешний вид» выберите «Настроить».
После перезагрузки страницы с окном настройки выберите параметр «Идентификация сайта». Вы увидите варианты заголовка сайта, слогана и значка сайта. Нажмите кнопку «Выбрать файл».
Загрузите свой значок в свою медиатеку через вкладку «Загрузить файл», щелкните свой значок и нажмите кнопку выбора.
Когда все будет готово, сохраните и опубликуйте изменения, нажав кнопку вверху страницы.
Добавление фавикона с кодом
Если вы не используете WordPress для своего веб-сайта, не беспокойтесь.
Вы также можете добавить фавиконы в код вашего сайта. Вам потребуется доступ к разделу
Загрузите свой значок на свой сервер и запишите его URL-адрес. Например: http://www.mywebsite.com/images/favicon.ico
Добавьте следующий код в теги
прямо над или под тегом