Как добавить иконку во вкладку сайта?
Наверняка вы часто видели на других сайтах, что во вкладке рядом с названием сайта находиться маленькая иконка? Обычно там располагается логотип компании. Это привлекает внимание и придает больший авторитет вашему ресурсу. Именно поэтому её и стоить добавить на свой сайт. Ниже я покажу как. Если у вас пока нет иконки — можете попробовать нарисовать тут.
Обычная верстка (HTML)
Тут все просто. Нужно всего лишь добавить внутри тега <head></head> данный код, заменив путь в атрибуте href на свой. Изображение можно использовать любое.
Выше был пример для изображения в формате png. Можно и использовать другие форматы. Например, gif или ico. Для этого нужно заменить значения атрибута type на image/gif или image/x-icon соответственно.
WordPress
Установить иконку во вкладке сайта на WordPress ещё легче.
1. Для начала войдите на сайт с админа. Далее переходите на главную страницу сайта. Тут вверху вы увидите такую кнопку:
2. Нажав на неё, вы увидите меню, в котором нужно нажать, на указанный пункт.
3. В низу данного пункта, вы увидите кнопку «Выберите иконку сайта», кликнув на которую, вы сможете выбрать favicon для своего сайта.
Спасибо за внимание, если у вас остались вопросы — задавайте их в комментарии, буду рад ответить.
Flex, логотип сайта. Form и input в HTML. Класс container. Иконочный шрифт
Новые участки кода index.html находятся между <!— New —><!— End —>, а в style.css — между /*New*/ /*END*/. Можете уже сейчас вставить этот код в соответствующие файлы, сохранить и открыть index.html в браузере. Таким образом, Вы увидите какой результат будет по итогу урока.
index.html:
style.css:
Начало урока. Разбор файла index.html
Разбор снова начнем с файла index.html. Первое, что здесь добавилось — это строка <link rel=»stylesheet» type=»text/css» href=»https://imdiz.ru/files/store/css/font-awesome.min.css»> . Про нее я расскажу позже. А сейчас обратите внимание на второй добавленный блок.
Div с классом container в HTML
Этот новый блок полностью помещен в <div ></div> . Это вспомогательный контейнер, который Вы в будущем сможете увидеть на многих сайтах. Благодаря этому контейнеру мы разместим все его содержимое по центру сайта. Посмотрите на картинку:
То есть, расстояние слева и справа от содержимого одинаковое.
В этот контейнер помещен логотип, строка поиска и корзина.
Как контейнер разместился по центру, будет рассказано при разборе style.css ниже.
Логотип сайта. Теги <a> и <img> в HTML
Дальше, на что нужно обратить внимание в index.html это логотип. Логотип сайта обычно представляет собой ссылку, в которой находится картинка:
Тег <a></a> в HTML служит для добавления ссылки. Тег <img> служит для добавления картинки.
Таким образом, находясь на любой странице сайта, пользователь сможет нажать на логотип, и попасть на главную страницу сайта.
И еще раз посмотрите как добавляется логотип в верстку: в тег <a></a> помещается тег <img>.
Теперь подробнее про ссылки. Для добавления на сайт ссылки в HTML есть тег <a></a> . Адрес ссылки указывается в атрибуте href . В нашем случае href=»/», и нажав на логотип, Вы просто обновите страницу. А если Вы укажете, например, href=»https://imdiz.ru», то при нажатии на лого перейдете на сайт https://imdiz.ru.
Для ссылки я задал class=»logo» , так как это ссылка для логотипа. Еще у тега a есть атрибут title , его значение на сайте (в браузере) Вы увидите, если просто наведете курсор мыши на логотип.
В HTML есть тег для размещения картинки на сайте, это тег — <img> . Сама картинка должна где-то находится: на Вашем компьютере или в Интернете. А чтобы тег img ее отобразил, он должен знать адрес, где находится картинка. Адрес картинки указывается в атрибуте src . Сейчас адрес картинки выглядит так — src=»https://imdiz.ru/files/store/img/logo.png», то есть картинка находится по этому адресу и отображается с него.
У img есть обязательный атрибут alt . Если вдруг сама картинка не будет отображаться на сайте, то отобразится текст из атрибута alt (alt от английского alternative — альтернатива).
Поисковая форма на сайте. Теги <form>, <input> и <button>
Вы наверняка пользовались формой поиска в каком-нибудь интернет-магазине. Сейчас Вы увидите, как она делается. Код очень простой:
На реальном действующем интернет-магазине благодаря тегу <form></form> то, что Вы пишете в поисковой строке, «улетает» на сервер (хостинг). И уже на сервере происходит сам поиск. Ну, и, если что-то нашлось, то Вы увидите результат поиска. Через тег <form> «улетают» и другие данные на сервер. Например, если регистрируетесь и вводите имя, телефон, пароль и т.д.
На этапе верстки поисковая форма еще не будет работать. Ее будет доделывать программист уже после верстки.
Само поле для ввода данных создается с помощью тега input (input с английского — «ввод данных»). У тега есть несколько атрибутов:
- type — тип данного поля. В нашем случае поле текстовое, поэтому type=»text» ;
- name — этот атрибут будет нужен, на этапе программирования, но я его сейчас тоже указал, чтобы Вы о нем знали;
- value — это значение, которое будет стоять в поле по умолчанию;
- placeholder — это бледный текст, который нужен, чтобы просто подсказать пользователю, для чего предназначено данное поле.
Для того, чтобы поиск выполнился, после ввода данных нужно нажать ENTER, либо кликнуть мышью на кнопку поиска. Кнопка верстается тегом <button></button> (button с английского — «кнопка»). С этим тегом все просто — то, что Вы укажете внутри этого тега, будет отображено на кнопке. Можно просто написать «КНОПКА», а можно вставить иконку, что я и сделал. Об этих иконках Вы уже узнаете в этом уроке уже скоро.
Здесь еще добавлю, что форму поиска я поместил в <div > . Это, чтобы разместить форму поиска и корзину в правой части сайта.
Иконочный шрифт FontAwesome
Как Вы могли видеть в браузере кнопка поиска представляет собой лупу. Эта лупа задана не картинкой, а иконочным шрифтом:
Чтобы установить иконочный шрифт нужно сделать 3 действия:
- скачать сам шрифт (файлы шрифта);
- скачать CSS-файл, отвечающий за иконочный шрифт;
- и подключить шрифт в файле index.html.
Перед тем, как скачать шрифт, создайте рядом с Вашим index.html папку fonts. В эту папку и нужно будет скачать шрифт. Скачать его можно по этой ссылке imdiz.ru/files/font-awesome-4.7.0.zip. Скачайте этот архив в папку fonts и распакуйте в ней же.
Теперь Вам нужен соответствующий CSS-файл. Скачайте его по этой ссылке imdiz.ru/files/font-awesome.min.zip. Распакуйте его в Вашу папку css. В архиве всего 1 файл — font-awesome.min.css. Подчеркиваю, этот файл нужно положить в папку css.
Ну, а теперь просто подключите иконочный шрифт строкой в index.html <link rel=»stylesheet» type=»text/css» href=»css/font-awesome.min.css»> . Ставьте эту строку перед подключением style.css следующим образом:
Таким образом, для подключения иконочного шрифта нужно выполнить 3 шага:
- Поместить файлы шрифта в папку fonts.
- Поместить файл font-awesome.min.css в папку css.
- В файле index.html подключить шрифт до подключения файла style.css.
Иконочный шрифт используется для того, чтобы сделать сайт легче. Если каждую иконку делать картинкой, и таких иконок будет много, то сайт будет чуточку тяжелее. Из-за этого сайт будет чуть дольше загружаться. А сейчас скорость загрузки сайта очень важный фактор.
Иконочные шрифты существуют разные. Я использовал FontAwesome. В Вашей работе верстальщиком будет зависеть от дизайнера, какой иконочный шрифт используется и используется ли вообще. Если дизайнер применял иконочный шрифт в дизайне, то и Вы будете применять в верстке этот же иконочный шрифт.
Корзина в шапке интернет-магазина. Тег <span>
Вся корзина помещена во вспомогательный блок <div class = «cart-informer» ></div> . А затем всё помещено в button . Все элементы корзины сверстаны с помощью тега span . Иконки заданы иконочным шрифтом.
Тег span представляет собой строку (span с английского — «интервал»). Span часто используют, чтобы стилизовать часть текста или всего одну букву. Например, чтобы какое-то слово выделить определенным цветом. У Вас в корзине span будет играть другую роль, о которой я расскажу ниже.
Что представляет собой корзина на данном сайте. Сперва указано количество товаров, помещенных в корзину. Затем идет иконка самой корзины. Затем общая стоимость товаров, помещенных в корзину. Ну, и справа стрелочка вниз — она показывает, что при наведении на корзину, внизу будет что-то появляться. В реальных интернет-магазинах при наведении на такую стрелочку обычно появляется небольшое окно, в котором показаны товары, добавленные в корзину.
Разбор файла style.css
Flex в верстке. Внутренние и внешние отступы
До этого я разбирал только index.html. Пришло время рассмотреть style.css и разобраться со стилями.
Первое новшество в style.css — это класс .container . Как я уже писал, это вспомогательный блок. Итак, какие стили используются для этого класса:
- width: 1140px; — ширина контейнера 1140px (пикселей). Обратите внимание, что в записи 1140px нет ни одного пробела!
- display: flex; — у каждого HTML-элемента есть свой display, даже если вы его не прописали. Основные значения: block, inline, inline-block, flex. Flex — это очень крутое значение. Оно появилось всего несколько лет назад. Flex с английского переводится, как «гибкий». Благодаря flex теперь все элементы, помещенные непосредственно в .container , будут располагаться слева направо, и будут «пытаться» занять всю ширину .container ;
- align-items: center; — применяется только к flex-элементам. Теперь все элементы, помещенные непосредственно в .container , будут находится на одном уровне. Обратите внимание, сейчас на сайте логотип, поиск и корзина находятся на одной горизонтальной прямой;
- padding — это внутренние отступы элемента. Пока не задумывайтесь, в чем разница межу внутренними и внешними отступами. Можно указать с какой стороны нужен отступ: слева, справа, сверху, снизу. Например, можно писать padding-left;
- margin — это внешние отступы элемента. Пока не задумывайтесь, в чем разница межу внутренними и внешними отступами. Можно указать с какой стороны нужен отступ: слева, справа, сверху, снизу. Например, можно писать margin-left. Может быть значение auto . Если для лева и право указать auto , то блок разместится ровно по центру ( margin-left: auto; margin-right: auto;).
Flex — расположение элемента справа
Чтобы расположить блок .header-right справа, я задал для него margin-left: auto; . Это работает для блоков, чей родительский блок имеет display: flex; . Блок .header-right разместится справа, потому что его родительский блок .container имеет display: flex; .
Свойства border, color, font-size, background в CSS. RGBA в CSS
Объясню, как сделана форма поиска.
Если убрать все стили для формы, для поисковой строки, для кнопки, то вся форма будет выглядеть вот так:
Как видите, внешний вид уже совсем не такой привлекательный. Строка поиска белая, надпись «Search» серая, кнопка уже совсем не в виде лупы. Так теги input и button выглядят, если им не прописать никаких CSS-стилей.
Итак, что я сделал, чтобы стилизовать поисковую форму. Для класса .search-form вы можете видеть следующие стили:
- margin: 0 auto; — про margin вы уже знаете, а такая запись означает, что отступы сверху и снизу равны 0, а слева и справа — auto;
- height: 50px; — высота всей поисковой формы равна 50 пикселей;
- border: 1px solid rgba(255,255,255,.2); — граница толщиной в 1 пиксель. Здесь solid означает, что граница в виде непрерывистой линии. Еще есть dotted и dashed — в виде точек и черточек соответственно. RGBA задает цвет. В скобках первые 3 числа задают цвет в формате RGB, а последнее число задает прозрачность (1 — это вообще не прозрачный, а 0 — это полностью прозрачный).
Граница будет только у самой формы (тег <form></form>), а у поискового поля и кнопки границы не будет. Я убрал границы вообще для всех тегов input и button на сайте.
Стили для поля ввода (поисковой строки) input :
- outline: 0; — если не задать это свойство, то у input при клике на него будет появляться голубая граница;
- background : none ; — так отменяется задний фон. По умолчанию, у input белый задний фон;
Перечисленные стили будут работать вообще для всех тегов input, встречающихся на сайте. А конкретно для поисковой строки я задал класс .search-input и задал стили, среди которых:
- color: #fff; — задает цвет текста. В данном случае текст будет белый;
- font-size: 12px; — задает размер шрифта 12 пикселей.
Осталось покрасить placeholder в белый цвет. Это делается необычным образом. Вот весь код для стилизации placeholder:
Так placeholder настраивается для различных браузеров: webkit — это Chrome и Safari, moz — это Mozilla Firefox, ms — это Internet Explorer от Microsoft.
Для стилизации кнопки я так же, как для input убрал для button свойства outline, border и background. И здесь остается одно еще неизвестное вам свойство — cursor . Свойство cursor задает вид курсора мыши при наведении на элемент. Конкретно cursor: pointer; указывает, что курсор должен выглядеть так же, как при наведении на ссылку.
Отрицательные отступы, justify-content, background-color, жирный шрифт в CSS
В этом уроке осталось разобрать стили для информера корзины. Еще неизвестных вам стилей там очень мало.
Смотрите класс .cart-informer__count :
- background-color: #fff; — вы уже знаете про свойство background. Свойство background обобщенный вариант, им можно задать и цвет, и фоновое изображение. А background-color задает только цвет;
- margin-right: -4px; — про margin вы уже тоже знаете, но я не писал, что можно задавать отрицательный отступ. То есть в данном случае элемент сместится вправо на 4 пикселя;
- justify-content: center; — относится только к flex-элементам, оно выравнивает дочерние элементы по центру. Например, если его сейчас убрать, то цифра 1 сместится влево.
Классы .cart-informer__i, .cart-informer__value :
- font-weight: 700; — задает жирность шрифта. Значение 900 задает самый жирный шрифт, можно еще написать bold (font-weight: bold;). Значение normal задает нормальный шрифт.
Комментарии в CSS
В конце предыдущего урока я рассказал про комментарии в HTML. В CSS тоже можно комментировать участки кода, и нужно это для тех же целей, что и в HTML. Можно оставлять в коде какие-то подсказки для себя и комментировать их, чтобы они не ломали код. Также, можно комментировать участки CSS-кода, чтобы не удалять их, если они вдруг еще пригодятся.
Чтобы закомментировать что-то в CSS нужно использовать такую конструкцию /* */. Между звездочками будет комментарий. Например, так:
Конец урока. В данном уроке вы узнали:
<a></a> — тег для добавления ссылки на сайте.
<img> — тег для добавления изображения.
<form></form> — тег для добавления формы. Через форму отправляются на сервер многие данные такие, как имя, телефон, картинки, поисковые запросы и др.
<input> — тег для поля ввода.
<button></button> — тег для кнопки.
Иконочный шрифт — используется для добавления иконок на сайт.
display — CSS-свойство для изменения типа отображения элемента. Элементы могут быть блочными (располагаются друг под другом), строчными (располагаются слева направо).
padding — CSS-свойство для внутренних отступов элемента.
JS Animated. Как добавить логотип-изображение в шаблон HTML с текстовым логотипом (сохранив текстовый логотип)
In our new tutorial we will teach you how to change predefined images dimensions in your Shopify store.
Из этого туториала Вы узнаете, как узнать идентификационный номер изображения (прикреплённого файла), для того чтобы использовать его в шорткоде.
Из этого туториала Вы узнаете, как обернуть картинку в текст в WordPress.
Submit a ticket
Если вы не смогли найти подходящее решение проблемы, пожалуйста воспользуйтесь следующей ссылкой, чтобы отправить запрос команде технической поддержки.
Отправить запросВы получите ответ в течение 24 часов