CSS Иконки
Самый простой способ добавить иконку на свою HTML-страницу — использовать библиотеку иконок, например, Font Awesome.
Добавьте название указанного класса иконок в любой встроенный элемент HTML (например, <i> или <span> ).
Все иконки в библиотеках иконок ниже представляют собой масштабируемые векторы, которые можно настраивать с помощью CSS (размер, цвет, тень и т.д.)
Font Awesome Иконки
Чтобы использовать иконки Font Awesome, перейдите на fontawesome.com, войдите в систему и получите код для добавления в раздел <head> вашей HTML-страницы.:
Узнайте больше о том, как начать использовать Font Awesome в нашем Font Awesome 5 Учебнике.
Примечание: Не требуется загрузка или установка!
Пример
Для полного ознакомления со всеми иконками Font Awesome, посетите Справочник иконок на нашем сайте W3Schools на русском.
Bootstrap иконки
Чтобы использовать глификонки Bootstrap, добавьте следующую строку в раздел <head> вашей HTML-страницы:
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»>
Примечание: Не требуется загрузка или установка!
Пример
<!DOCTYPE html>
<html>
<head>
<link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css»>
</head>
<body>
Google Иконки
Чтобы использовать Google иконки, добавьте следующую строку внутри раздела <head> вашей HTML страницы:
<link rel=»stylesheet» href=»https://fonts.googleapis.com/icon?family=Material+Icons»>
Примечание: Не требуется загрузка или установка!
Пример
<!DOCTYPE html>
<html>
<head>
<link rel=»stylesheet» href=»https://fonts.googleapis.com/icon?family=Material+Icons»>
</head>
<body>
Для получения полного списка всех иконок, посетите Учебник иконок на нашем сайте W3Schools на русском.
Примечание. Ссылки на сайты иконок (Fontawesome, Bootstrap, Google-иконки) могут меняться в зависимости от выхода новой версии набора иконок. Поэтому для получения наиболее новой версии набора иконок и ссылки на них посетите официальный сайт необходимого набора и скопируйте нужную ссылку.
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
Как вставить SVG иконку на сайт
Существует несколько способов, как вставить SVG иконку. Я не буду перечислять здесь все рабочие варианты, дабы не перегружать вас избыточной информацией. А остановлюсь, на двух принципиальных методах – с интерактивностью (взаимодействие с пользователем) и без неё.
Без поддержки интерактивности
Если вы не планируете, вносить изменения в SVG файл или анимировать его, а просто используете, как законченное изображение, то вставляете, как картинку.
<img src=»facebook.svg» alt=»facebook»> // через HTML файл
С поддержкой интерактивности
Для дальнейших манипуляций с SVG файлом – наилучший способ встраивания иконки – тег object. Внутри тега object, для старых браузеров, вставляем SVG иконку, картинкой. Дело в том, что старые браузеры, не видят формат SVG, так покажем им хоть что-то.
<object type=»image/svg+xml» data=»icon.svg»>
<img src=»icon.png»>
</object>
Плюсы SVG формата
- взаимодействует с пользователем
- адаптируется под разные разрешения экрана
- масштабируется без потери качества
- мало весит, значит, быстро загружается
Как правило, SVG формат, применяют для сохранения иконок. Откуда же они берутся? Есть несколько вариантов.
- создать в векторных программах
- скачать бесплатно или купить
Зайдем на сайт flaticon.com и скачаем иконку автомобиля. Скачанный SVG файл, состоит из инструкций по построению прямых и кривых линий, в виде текстовой информации.
Как вставить иконку в HTML
Создадим два блока, для управления позиционированием и размерами иконки, на странице. Внутри блока с классом icon, вставим, ссылку на SVG иконку, посредством тега object.
CSS код
Разместим в центре, родительский блок с классом box.
.box <
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
>
Дочерний блок с классом icon, выравниваем по центру, относительно родителя.
Как сделать SVG адаптивным
В коде файла sedan-car-front.svg, жестко заданы размеры, которые не позволят масштабировать икону.
Заменим пиксели на проценты. width=»30%» height=»30%»
Вот и все. Теперь при изменении размера экрана, размеры иконки, так же меняются.
Как изменить цвет SVG
Для изменения цвета, вместо свойства color, используют – атрибут fill. Изменить цвет, можно прямо в коде SVG, добавив, следующий код, между тегами svg.
Машина стала красной.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
How to add a browser tab icon (favicon) for a website?
I’ve been working on a website and I’d like to add a small icon to the browser tab.
How can I do this in HTML and where in the code would I need to place it (e.g. header)? I have a .png logo file that I’d like to convert to an icon.
13 Answers 13
There are actually two ways to add a favicon to a website.
<link rel=»icon»>
Simply add the following code to the <head> element:
PNG favicons are supported by most browsers, except IE <= 10. For backwards compatibility, you can use ICO favicons.
Note that you don’t have to precede icon in rel attribute with shortcut anymore. From MDN Link types:
The shortcut link type is often seen before icon , but this link type is non-conforming, ignored and web authors must not use it anymore.
favicon.ico in the root directory
All modern browsers (tested with Chrome 4, Firefox 3.5, IE8, Opera 10 and Safari 4) will always request a favicon.ico unless you’ve specified a shortcut icon via <link> .
So all you have to do is to make the /favicon.ico request to your website return your favicon. This option unfortunately doesn’t allow you to use a PNG icon.
-
Use a tool to convert your png to a ico file. You can search «favicon generator» and you can find many online tools.
Place the ico address in the head with a link -tag:
The best one that I found is http://www.favicomatic.com/ I say best because it gave me the crispest favicon, and required no editing after their transformation. It will generate favicons at 16×16 and 32×32 and to quote them «Every damn size, sir!» Also, their site looks cool and is easy to use.
They also generate the html that you need to use for the files they generate.
I looked at the first 20 or so google results, and this was by far the best.
There are a number of different icons and even splash screens that you can set for various devices. This answer goes through how to support them all.
Here are some snippets I have used with relevant links to where I gathered the information. See my blog for more information and more information about the ASP.NET MVC Boilerplate project template with all this built in right out of the box (Including sample image files).
Add the following mark-up to your html head. The commented out sections are entirely optional. While the uncommented sections are recommended to cover all icon usages. Don’t be scared, most if it is comments to help you.
My browserconfig.xml file. Full explanation above.
My manifest.json file. Full explanation above.
A list of the files in the project (Note that the names of these files are important if you decide to put some of them at the root of your project to avoid using the above meta tags):
Total Overhead
If you take out the comments that’s 3KB of extra HTML, if you don’t support splash screens that’s 1.5KB. If you are using GZIP compression on your HTML content, which everyone should be doing these days, that leaves you with about 634 Bytes of overhead per request to support all platforms or 446 Bytes without splash screens. I personally think its worth it to support IOS, Android and Windows devices but its your choice, I’m just giving the options!
Side Note About The Current Web Icon/Splash Screen/Settings Situation
This situation with vendor specific icons, splash screens and special tags to control the web browser or pinned icons is ridiculous. In a perfect world we would all use a favicon.svg file which could look good at any size and could be placed at the root of the page. Only FireFox supports this at the time of writing (See CanIUse.com).
However, icons are not the only setting these days, there are several other vendor specific settings (shown above) but a favicon.svg file would cover most use cases.
Update
Updated to include the new Android/Chrome version M39+ favicon/theming options. Interestingly, they have gone with a similar approach to Microsoft but are using a JSON file instead of XML.
How to add Icons to your Web Pages
I will be showing how to add icons to your web pages using Font Awesome. Font Awesome are icons which you can implement that are SVGs. Here is a great site to read up on what SVGs are and their benefits
- First head over to https://fontawesome.com/ and click on Start for free
2. You’re going to have to enter your email as they’ll send you a “kit” that’ll contain your <script> tag that you’ll be entering into your HTML file.
3. This is the script tag that you will copy and paste into your <head> tag in your HTML file as shown below.
4. Let’s go to our HTML file and paste into our <head> tag
5. Let’s add a popular icon our hamburger menu to our Navbar. Let’s search for our menu icon. The code that we will be grabbing is the
- <i class “fas fa-bars”></i>
6. Let’s go back to our HTML file and let’s add our icon
7. This is our final result, we can style the icon using the provided class “fas fa-bars”. One benefit of using SVG is that we can change the color.
8. I will be posting a video on step by step from step 1. I will also be showing how to dynamically change the menu bar to hide and show our nav items.