Как сделать иконочный шрифт для сайта
Добавил пользователь Дмитрий К. Обновлено: 04.10.2024
В этой статье я расскажу Вам как создать файл шрифтов-иконок аналогичный всем известному IcoMoon, как подключить его к странице Вашего сайта. Но сначала, немного информации для тех кто не совсем понимает о чем идет речь и какие преимущества дает то самое о чем идет речь ))
При создании сайтов или его доработке перед веб-мастерами нередко встает задача подбора управляющих иконок подобного рода:
Их назначение может быть совершенно разнообразным от размещения ссылок на социальные сети до элементов управления контентом на сайте как то: сохранение документа, копирование, обозначение контактного номера телефона и прочее.
Иконки бывают следующих направлений: бизнес, общение, социальные сети, компьютеры и мобильные, дизайн и творчество, разработки, еда, хостинг, меню, мультимедиа, спорт, игры, символы и прочее.
В чем плюсы использования:
- Все нужные иконки в одном файле;
- Цвет, размер, тень, и прочее параметры, применимые к обычным шрифтам, можно менять через CSS;
- Иконки можно делать абсолютно любого размера без потери качества (ведь это вектор);
- Совместимы с подавляющим большинством браузеров (IE, FF, Chrome, Opera и прочие);
- Поддержка Bootstrap;
- Отпадает необходимость использования спрайтов.
В этой статье в качестве примера мы будет рассматривать сервис Fontello, так в отличие от других сайтов, которые предлагают качать тысячи иконок в одном файле шрифта, тут можно выбрать только нужные вам и тем самым ограничить размер файлов, ведь файл шрифта с полной коллекцией иконок может достигать в размере до полуметра.
Создание и подключение шрифта иконок к странице сайта
ШАГ 2. Выбираем нужные иконки, просто кликнув по ним мышкой. Можно так же выбрать сразу группу иконок выделив их при помощи зажатой левой кнопки мыши.
Если у Вас плохое зрение и Вы не можете рассмотреть иконки, вы можете с легкостью увеличить их с помощью ползунка, который находиться в верхней части сайта. Этот ползунок просто увеличивает иконки и никоим образом не влияет на скачиваемый архив.
ШАГ 3. После того как иконки выбраны, перейдя на вкладку "Customize Names" Вы можете изменить имя вызова иконок, но делать этого не рекомендую, так как значения, выставленные по умолчанию, адаптированы под Bootstrap. Так же не рекомендую менять какие-либо значения на вкладке "Customize Codes".
ШАГ 4. Скачиваем архив со шрифтами, в которых уже содержаться нужные нам иконки. Обратите так же внимание что на кнопке для скачивания значиться количество, попавших в Ваш шрифт, иконок.
ШАГ 5. Извлекаем содержимое архива и видим следующий набор файлов и папок:
Из этого всего нас интересуют только папки CSS и FONTS. Копируем эти папки к нам на сервер. Порядка ради, файлы из папки CSS копируем в папку CSS на нашем сайте, и файлы из папки FONTS копируем в папку FONTS соответственно. Если папки FONTS у вас на сервере нет то можете просто скопировать папку FONTS в папку в которой у Вас находится папка CSS.
ШАГ 6. Подключаем файлы CSS в теге нашего сайта следующим образом:
Раньше при создании сайтов приходилось использовать растровые иконки. Это было красиво, но неудобно по целому ряду причин. Сегодня на место растровых иконок пришли векторные. Это оригинальное и изящное решение, которое украсит и освежит ваш сайт.
- Как сделать свой собственный иконочный шрифт
- Как сделать собственный шрифт
- Как создать шрифт
- Как задать свой шрифт в html
Существует хороший веб-сервис для создания шрифтов из иконок. Называется он Fontastic. Он полностью бесплатен и без рекламы. Первым делом зарегистрируемся на сайте сервиса. Заходим на сайт fontastic.me, вводим в поля ввода свой электронный адрес и придумаем пароль, далее жмём большую жёлтую кнопку "Create your Icon Font". Иногда случается, что никакая информация, подтверждающая успешную регистрацию, не выводится. Не волнуйтесь об этом, переходите к следующему шагу.
Теперь нажимаем на кнопку "Login", расположенную в верхнем правом углу. На открывшейся странице снова вводим свой e-mail и пароль, нажимаем кнопку "Login".
Подождав несколько секунд, откроется панель для создания шрифтов из иконок.
Перед вами большой выбор иконок. Кликая на понравившиеся иконки мышью, выберите столько иконок, сколько вам нужно. В верхней части после слова "PUBLISH" указывается количество выбранных иконок.
Если вами не хватает иконок из представленного количества, пролистайте страницу до низа и найдите кнопку с надписью "Add more icons". Нажмите на неё.
Откроется страница с дополнительными пакетами иконок. Некоторые из них платные (помечены лейблом "Premium"), некоторые бесплатные. Для активации дополнительных иконок, нажмите кнопку "ACTIVATE" на выбранных пакетах. Теперь они появятся в общем списке доступных иконок, когда вы перейдёте в начало работы с панелью управления, нажав на кнопку "Home" в верхнем меню.
Если вам нужно добавить собственные иконки, то на этой же странице вверху справа нажмите на кнопку "IMPORT ICONS". Теперь вы можете загрузить свои собственные иконки. Обратите внимание, что поддерживаются только векторный формат SVG.
Выбрав нужное количество иконок, нажимаем кнопку "CUSTOMIZE". Здесь вы увидите все выбранные иконки, и можете присвоить произвольные названия классов для них, по которым вы будете обращаться к ним в CSS стилях. Или можете оставить названия по умолчанию, которые присвоила иконкам система.
Нажимаем кнопку "PUBLISH". Здесь можно скачать созданный векторный иконочный шрифт (кнопка "DOWNLOAD"). Скачиваем на компьютер архив со шрифтом, созданный сервисом.
В скачанном архиве находится CSS-файл стиля, HTML-файл с именами классов иконок и папка "fonts" со шрифтами. Этот иконочный шрифт можно использовать на своём сайте.
Чтобы использовать созданный иконочный шрифт, нужно сделать следующее:
- распаковать содержимое архива и загрузить на свой сайт в директорию со стилями;
- вставить ссылку на CSS-файл в раздел HEAD всех страниц сайта, которые будут работать с этим иконочным шрифтом;
- в коде страницы используем имя созданных ранее классов для использования только что созданного иконочного шрифта.
Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.
Подключение и использование иконочных шрифтов
Чтобы просто и быстро добавить масштабируемые картинки к различным элементам сайта, без использования спрайт-изображений, можно применить иконочный шрифт, в котором собраны все необходимые иконки в одном стиле. В подавляющем большинстве случаев, символы добавленные таким образом, правильно отображаются в браузере интернет-пользователя и остаются четкими при увеличении и уменьшении масштаба веб-страницы. И хотя сами изображения элементов обладают довольно простым, но сегодня очень модным дизайном, их оформление, например цвет и фон, можно изменить без труда.
Сервисов предоставляющих бесплатные, готовые сборки шрифтовых картинок достаточно, при этом разнообразие иконок в них может удовлетворить практически любые потребности при создании сайта или оформлении блога. В данной заметке речь пойдет о том, как подключить иконочный шрифт и использовать его при оформлении сайта.
Два наиболее популярных ресурса это Font Awesome и Fontello, первое(и главное) - они бесплатны; второе - Font Awesome - предоставляет публичную ссылку для прямой загрузки шрифта со своего хостинга, то есть не нужно использовать свой или искать сторонний хостинг для размещения необходимых файлов, в Fontello можно собрать свой собственный шрифт, загружая на сайт иконки в .svg формате, или выбрать из общего набора именно те, которые нужны в данном случаи, а не загружать всё что есть.
Как подключить иконочный шрифт к сайту
Способов подключения на данный момент существует три:
1. Если доступна, использовать общую(публичную) прямую ссылку на хостинг сервиса, которую нужно разместить внутри раздела , лучше повыше или перед закрывающим , это уже как пойдет.
Для Font Awesome последняя версия ссылки выглядит так:
- дать путь только к папке:
3. После загрузки архива с фалами, извлечь только содержимое папки Fonts и подключить иконочный шрифт, используя правило CSS @font-face:
Как использовать иконочный шрифт на сайте
У каждого выбранного символа есть название и код, посмотреть их можно как на странице официального сайта, так и на демо странице из загруженного архива. Название, по совместимости, является так же и добавочным классом элемента, для которого нужна иконка, код используется как UTF-символ иконки. Способы добавления символов на страницу зависят от варианта подключения шрифта.
Если воспользоваться вторым вариантом - подключить шрифт используя CSS-файлы, возможно добавление знаков как с помощью класса, так и кода:
1. Создать пустой элемент с классом иконки и добавить его перед нужным блоком:
3. Добавить в CSS псевдоэлемент для элемента с иконкой, который будет содержать UTF-код желаемого символа и указывать на используемый шрифт (в данном примере - Fontello):
ul li a::before <
content: '\e80a';
font-family: "fontello";
font-style: normal;
font-weight: normal;
>
Если для подключения шрифта иконок использовать третий вариант - только файлы шрифтов, то для того, чтобы можно было добавлять иконки по средствам присвоения соответствующего класса-названия, в CSS нужно внести дополнительную конструкцию устанавливающую подключенный шрифт для этих элементов и для каждого указать относящийся к нему символ:
[class^="icon-"]::before,
[class*=" icon-"]::before font-family: "fontello";
font-style: normal;
font-weight: normal;
>
.icon-doc-inv::before content: '\e801';
>
.icon-mail-alt::before content: '\e805';
>
Частная коллекция качественных материалов для тех, кто делает сайты
Бесплатные уроки CSS для начинающих
Вдобавок к текстовым урокам по каскадным таблицам стилей, в данном разделе также представлены полезные уроки CSS для начинающих. Все материалы изложены в максимально простой и понятной форме, поэтому даже абсолютный новичок сможет быстро освоить все премудрости создания красивого оформления сайтов.
Читайте также: