Библиотека иконок для сайта: Бесплатные иконки — Tilda Publishing — Независимое театральное объединение "Зрительские симпатии"

Содержание

Великолепная десятка библиотек SVG иконок | by Jenny V | NOP::Nuances of Programming

Как-то раз я провел опрос на Reddit и обратился к коллегам-разработчикам с простой просьбой: поделиться названиями любимых библиотек иконок. Идея нашла живой отклик у сообщества, и вскоре я открыл для себя много отличных библиотек с открытым исходным кодом, о которых раньше и понятия не имел. И вот я решил написать статью о 10 лучших из них на основе результатов проведенного опроса.

Предварительно были проверены условия лицензирования всех упомянутых в статье библиотек, так что можете быть уверены, что все они общедоступны. Стоит также отметить, что перечисленные ниже библиотеки должны иметь современный и актуальный дизайн. Итак, наша великолепная 10-ка:

Более чем уверен, что большинство из вас хотя бы раз использовали иконки Font Awesome, одной из самых первых популярных библиотек с открытым кодом. В настоящее время ее галерея содержит в целом 1588 бесплатных и 7 842 платных иконок.

Font Awesome предлагает огромную коллекцию разнообразных иконок, что является одной из главных причин большой востребованности этой библиотеки. На нашем веб-сайте используются двухцветные иконки Font Awesome Pro, и мы уверены, что благодаря им он выгодно выделяется на фоне аналогичных сайтов.

Font Awesome предлагает еще одну интересную возможность — создание персональной ссылки на CDN при наличии аккаунта (на соответствующем сервисе). Это позволит вам задать условие для исключения обычных иконок и использования только двухцветных.

Конечно, вы также можете включить только пару иконок, напрямую скопировав код SVG. Я бы настоятельно посоветовал это делать при условии, что вы не используете больше 20–30 значков на сайте.

Существует много способов использования возможностей Font Awesome: копирование источника SVG одной иконки, загрузка библиотеки или использование общего или их персонального CDN. У них есть прекрасная страница, которая поможет начать работу с Font Awesome.

Демо.

2. Репозиторий на Github.

Ionicons.io — еще одна библиотека SVG с открытым кодом, содержащая 457 иконок в трех разных стилях: контурные, заливные и заостренные. Здесь мне особенно нравится простой и понятный дизайн контуров и форм. Почему бы не использовать их в своем будущем проекте?

Использование Ionicons сопровождается хорошей документацией. Если вам нужна вся библиотека вместо отдельной SVG иконки, можете включить следующий скрипт в футер (нижний блок сайта):

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>

После этого просто добавьте следующий элемент в HTML-шаблон и измените атрибут name в соответствии с иконкой, которую хотите показать, вот таким образом:

<ion-icon name="heart"></ion-icon>

На официальном сайте содержится более подробная информация об основных правилах использования.

Демо.

2. Репозиторий на Github.

Если вы активно участвуете в жизни сообщества разработчиков на Reddit, то, конечно, не оставили без внимания факт появления новой библиотеки иконок, использующей для стиля только CSS. На данный момент она насчитывает свыше 704 отдельных иконок, распределенных по таким категориям, как уведомления, указатели (стрелки), код, дизайн и многое другое.

В свое время возникало много споров по поводу того, что лучше использовать с точки зрения производительности: CSS или SVG. Но позднее создатель библиотеки @astritmalsija запустил форматы SVG, SVG Sprite, Figma и Adobe XD для второй версии, предложив таким образом более широкий выбор реализаций.

Начать работу с CSS.gg очень просто: надо лишь выполнить команду npm -i css.gg и затем включить следующую таблицу стилей в тег head:

<link href='https://css.gg/css' rel='stylesheet'>

Также существуют альтернативы CDN, а именно UNPKG или JSDelivr:

<!-- UNPKG -->
<link href='https://unpkg.com/css.gg/icons/all.css' rel='stylesheet'><!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css' rel='stylesheet'>

Более подробная информация о том, как начать использование CSS. gg, содержится в инструкциях официального репозитория на Github.

Демо.

2. Репозиторий на Github.

Представляю вам Feathericons, внешне привлекательную и понятно устроенную библиотеку с 282 SVG иконками. По умолчанию ее основным форматом является SVG, так как на данный момент он является самым быстрым способом работы со значками.

Вы можете настраивать размер, толщину штриха и цвет иконок перед их загрузкой, а также переключать темный и светлый режимы нажатием на значок луны в правом верхнем углу веб-сайта.

Для начала работы с Feathericons необходимо загрузить файл SVG и включить его в вашу разметку либо с помощью src, либо используя его в качестве встроенного объекта SVG.

Демо.

2. Репозиторий на Github.

Eva Icons — это набор из 480 искусно выполненных иконок с открытым кодом в форматах SVG и PNG. Для создания значков используются два основных стиля: контурный и заливной. Радует тот факт, что изначально можно выбирать анимационные эффекты при наведении курсора мыши на значки, например изменение масштаба, пульсацию или вибрацию.

Работа с Eva Icons начинается с загрузки файла SVG/PNG после выбора иконки или загрузки целого набора. Вы можете также добавить Eva Icons, установив пакет npm следующим образом:

npm i eva-icons

Демо.

2. Репозиторий на Github.

Heroicons, очередная библиотека с открытым кодом, является итогом работы создателей Tailwind CSS. Она содержит 165 отдельных иконок, включая контурные и заливные, и предлагает темную и светлую версии каждого элемента. Внешний вид значков качественно и искусно проработан.

Использование иконок начинается с нажатия на одну из них и копирования встроенного кода SVG, который сразу можно использовать в проектах. Примечательно еще и то, что библиотека предлагается в Figma. Если вам нужно включить все иконки, необходимо загрузить все файлы SVG с общедоступного репозитория.

Демо.
Репозиторий на Github.

Данная библиотека включает свыше 600 пользовательских иконок с поддержкой SVG. На мой взгляд, она выгодно отличается от всех других с точки зрения дизайна. Если вам нравится использовать Bootstrap как CSS-фреймворк, то советую обратить внимание на Bootstrap 5 Icons и включить его в свой следующий проект.

Для работы с Bootstrap 5 Icons необходимо скопировать код SVG, а затем применить его по своему усмотрению: либо используя как встроенный код, либо включая в качестве источника для образа, либо создавая классы псевдокода в CSS. Какой бы способ вы не выбрали, на сайте есть информация по реализации каждого из них.

Демо.
Репозиторий на Github.

Remix Icon — это большая коллекция из 2149 красивых иконок с открытым кодом под лицензией Apache. Они распределены по таким категориям, как бизнес, общение, финансы, карта и многие другие. Эта библиотека определенно заслуживает вашего внимания.

Начинаем работу с Remix Icon либо с загрузки версий SVG или PNG, либо с копирования встроенного кода SVG в буфер обмена. В качестве альтернативы можно также загрузить весь пакет как один файл .svg или SVG-спрайт.

Демо.
Репозиторий на Github.

Octicons — набор из более 100 иконок с открытым кодом, которые Github использует на своем главном сайте. Насколько мне известно, они уже работают над второй версией библиотеки, улучшают дизайн и добиваются разнообразия иконок.

Огромное преимущество Octicons состоит в том, что его можно использовать как уже готовый пакет в React, Ruby, Rails, Jekyll и JavaScript. Здесь вы найдете список всех пакетов, необходимых для работы с Octicons.

Демо.
Репозиторий на Github.

Завершает наш список не менее интересная библиотека Ikonate, содержащая около 100 качественных иконок в плоском дизайне. Она находится под весьма лояльной и разрешительной лицензией MIT.

Вы можете легко настраивать размер, толщину и закругления границ, а также цвет иконок перед их экспортом. В экспортируемом файле ZIP вы получите HTML-файл со всеми выбранными встроенными значками, папку с отдельными файлами SVG и спрайт-листом.

Демо.
Репозиторий на Github.

В заключении прошу вас поддержать эти библиотеки, присудив им звезду на Github и тем самым отметив ту неоценимую работу, которую они выполняют. Поделитесь этим списком с вашими друзьями или коллегами, если вы сами еще не выбрали конкретную библиотеку иконок для вашего следующего проекта.

15 лучших и крупнейших библиотек иконок

В этой статье ознакомимся с 15 лучшими и крупнейшими доступными библиотеками иконок для веб-сайтов. Многие из них предлагают тысячи, а то и миллионы пиктограмм, так что обязательно найдётся именно то, что нужно.

Сразу уточняем: это не 15 самых лучших библиотек, а 15 из лучших. Разумеется, есть и другие, не менее замечательные, о которых я не упомянул или не знаю.
И, нет, это не рейтинг — список маркированный, а не нумерованный.

Перевод сделан при поддержке компании EDISON.
Мы занимаемся доработкой и сопровождением сайтов на 1С-Битрикс, а также делали сайты и приложения для Московского ювелирного завода.
Мы очень любим создавать и поддерживать сайты! 😉

The Noun Project — это громадная библиотека иконок, количество коих, по слухам, перевалило за 2 миллиона. Всё это создано самими участниками — у проекта огромное активное сообщество, к которому можно присоединиться.

iconmonstr — это библиотека значков, предлагающая более 4-х тысяч иконок, распределённых в три с лишним сотни различных коллекций. Библиотека поддерживается одним человеком. Очень круто, что SVG-версии можно получить в виде HTML-кода прямо на сайте, так что скачивание необязательно.

Good Stuff No Nonsense — и это библиотека, также созданная кем-то единолично. Всё отрисовано вручную.

Унифицированные иконки на Orion предлагаются в 4-х стилях:

Line, Solid, Color и Flat.

Адаптируется к любому типу проекта посредством изменяемой толщины линий, контролем цветности и отличной читаемости.

Доступный и как веб-сайт и как приложение, IcoMoon предлагает более 4 тысяч бесплатных иконок и автономное хранилище для них. Каждый пакет имеет подробное лицензирование, так что дизайнерам и разработчикам сразу ясно, на каких условиях возможно использование. Пользователи также могут создавать свои собственные шрифты из значков.

Все значки в Pictonic выдержаны в точном пиксельном масштабе, благодаря чему их размер можно менять без потери качества и целостности. Так как они предлагаются в виде наборов шрифтов, значки этой коллекции можно стилизовать с помощью CSS.

Когда дело касается разнообразия в выборе — Icons8 трудно превзойти с его ежедневно пополняемым легионом из более чем 85-ти тысячи значков. Чтобы найти нужную графику, можно поискать по тегам или же полистать какие-либо из 50+ имеющихся тематических коллекций.

Под два миллиона бесплатных векторных пиктограмм в форматах SVG, PSD, PNG, EPS или ICON FONT. Тысячи тысяч бесплатных значков в крупнейшей базе векторных иконок по свободной лицензии от Flaticon!

^{Примечание: для загрузки и просмотра регистрация на сайте не нужна, а вот для настройки значков нужно авторизовываться.}

Ну и куда уж без Font Awesome, возможно, самой известной библиотеки иконок.

iconscout — это миллионы различных иконок на всевозможные темы, которые только возможно придумать. Здесь пользователи могут создавать собственные значки и делиться ими, а также составлять коллекции, которые потом могут просматривать другие посетители.

Iconfinder в настоящее время — одна из крупнейших библиотек с более чем 3-мя миллионами бесплатных и платных иконок, объединённых в более чем 25 тысяч наборов.

PixelLove — это более 5 тысяч иконок для платформ iOS и Android, предназначенных для дизайнеров, создающих мобильные сайты и приложения. Все иконки доступны в различных размерах пикселей.

Streamline Icons — это 10+ тысяч пиктограмм с тремя разными значениями толщины линий (Light, Regular, Bold).

53 категории, 720 подкатегорий и более 30 тысяч иконок.

Примечание переводчика: с 1 января 2020 года сайт недоступен. Надеемся, что это ненадолго.

Graphic Burger — это специализированный сайт, предоставляющий большое количество бесплатных и платных иконок и других графических элементов. Все значки хорошо оптимизированы, совместимы со всеми видами веб-сайтов и приложений. Разнообразие очень велико, можно выбрать значки, подходящие практически для любой темы.

Smashicons предлагает чрезвычайно насыщенную коллекцию с 175+ тысячами иконок. Однако, в отличие от некоторых библиотек, упомянутых выше, не все значки соответствуют одному и тому же стилю. Поэтому, если нужно чтобы веб-сайт/приложение имели единообразное оформление, стоит убедиться, что все требуемые пиктограммы содержатся в определенном наборе значков.

Автор: Ришат

Источник

Великолепная десятка библиотек SVG иконок

Итак, наша великолепная 10-ка:

Font Awesome

Демо.

2. Репозиторий на Github.

Ionicons

<script src="https://unpkg.com/[email protected]/dist/ionicons.js">
</script>

<ion-icon name="heart"></ion-icon>

На официальном сайте содержится более подробная информация об основных правилах использования.

Демо.

2. Репозиторий на Github.

CSS.gg

<link href='https://css.gg/css' rel='stylesheet'>

Также существуют альтернативы CDN, а именно UNPKG или JSDelivr:

<!-- UNPKG -->
<link href='https://unpkg. com/css.gg/icons/all.css' 
rel='stylesheet'>

<!-- JSDelivr -->
<link href='https://cdn.jsdelivr.net/npm/css.gg/icons/all.css'
rel='stylesheet'>

Более подробная информация о том, как начать использование CSS.gg, содержится в инструкциях официального репозитория на Github.

Демо.

2. Репозиторий на Github.

Feathericons

Демо.

2. Репозиторий на Github.

Eva Icons ❤️

npm i eva-icons

Демо.

2. Репозиторий на Github.

Heroicon

Демо.
Репозиторий на Github.

Bootstrap icons

Демо.
Репозиторий на Github.

Remix Icon

Демо.
Репозиторий на Github.

Octicons

Демо.
Репозиторий на Github.

Ikonate

Демо.
Репозиторий на Github.

Как использовать библиотеку иконок Alibaba iconfont для добавления иконки перед заголовком на веб-странице html

При создании веб-страниц мы часто сталкиваемся с ситуациями, когда необходимо добавить значок схемы перед заголовком, чтобы повысить осведомленность читателей. В этой статье объясняется, как использовать ресурсы значков в библиотеке векторных значков Alibaba для добавления значков для заголовка на веб-странице.

Скачать иконки ресурсов
Сначала найдите iconfont в браузере и войдите на официальный сайт Alibaba Vector Icon Library (первое использование требует регистрации), затем найдите нужный значок в окне поиска, выберите соответствующий значок и нажмите Значок корзины покупок добавляется в корзину покупок. В это время количество значков, добавленных в корзину покупок, будет отображаться в корзине покупок в правом верхнем углу страницы. После добавления значков в корзину покупок можно щелкнуть «значок корзины покупок», чтобы открыть корзину покупок и добавить ее. «Мой проект», вам нужно создать новый проект здесь, например, «test1», который я создал, затем нажмите «Мой проект» в разделе «Управление значками», выберите «Загрузить на локальный компьютер», чтобы завершить загрузку ресурсов значков.
Импортировать ресурсы значков в файлы CSS
Откройте загруженный сжатый пакет и разархивируйте его, чтобы создать папку, как показано на рисунке, откройте папку и скопируйте файл «iconfont. css» в каталог, где хранится файл CSS.
Значок ресурса вызова
Используйте компилятор, чтобы открыть CSS и HTML, который вы пишете. На данный момент у вас уже есть файл «iconfont.css» в каталоге CSS. Откройте файл HTML и обратитесь к нему в заголовке. Файл CSS, а затем вызовите значок, как показано на рисунке, перед необходимым заголовком (имя значка находится в «iconfont.css»).

Имя и код иконки в файле CSS
После сохранения html откройте html в браузере, чтобы завершить добавление значка. На следующем рисунке показано сравнение эффекта веб-страницы до и после добавления пользователем значка.

Особая благодарность блоггеру CSDN paditang, эта статья ссылается на его «простой урок по использованию иконок»
настоящим прикрепляет ссылку на свою статью,Простое руководство по использованию iconfont

Как добавить иконки в меню сайта на WordPress

Иконки — немаловажная часть любого дизайна. Многие иконки являются общепризнанными. К примеру, обозначения уборных в аэровокзалах. Ведь даже без знания языка, благодаря иконкам на дверях, вы без труда поймете, где находится мужская, а где — женская комната.

То же самое применимо к веб-сайтам. Отображаемые иконки помогут посетителям в навигации по сайту, увеличат удобство пользования ресурсом и сделают внешний вид страницы более привлекательным.

Однако процесс добавления иконок в меню CMS типа WordPress может оказаться непростой задачей. Если ваш сайт построен на WordPress, это руководство окажется полезным для вас и вы найдете самый простой способ отображения иконок в меню навигации.

Добавлять иконки мы будем с помощью плагина Menu Icons. Для начала установите, и активируйте его:

Все готово. Можем приступать.

В этом примере я буду использовать TwentyTwelve, аккуратную и прозрачную тему WordPress. Также я создам несколько страниц, которые включу в меню.

Создаем пункт меню через Вид>Меню (Appearance > Menus). Не забудьте определить местоположение пункта меню, пока он не появится на сайте:

Теперь мы добавим иконки для каждого пункта. Развернем один из пунктов. Там вы найдете ссылку «Иконка: выбрать иконку» (Icon: Select icon). Выбираем пункт «Выбрать иконку» (Select icon). Откроется окно аналогичное окну медиа-библиотеки WordPress.

На момент написания этой статьи, плагин Menu Icons поставлялся с тремя библиотеками иконок — Dashicons, Genericons, и FontAwesome.

Можно набрать иконки сразу из трех библиотек. Но лучше сделать набор из одной. Потому как в библиотеках иконки подобраны по подобию, имеют схожие размеры и изгибы.

Иными словами, если начали использовать FontAwesome — используйте на сайте только эту библиотеку. Это позволит сохранить согласованность в стиле и придать сайту законченный вид:

При выборе иконки справа вы увидите превью. На панели справа можно произвести некоторые настройки. Можно поместить иконку перед или после пункта меню, изменить размер шрифта и установить вертикальное выравнивание.

Когда все настройки произведены, нажимайте кнопку Select и проделайте аналогичные действия с оставшимися пунктами меню:

Плагин Menu Icons удобен и прост в использовании. Он великолепно интегрируется в интерфейс WordPress UI и интуитивен в использовании. Вдобавок ко всему разработчики планируют в следующих версиях включить несколько новых функций, включая новые библиотеки с иконками и возможность загрузки пользовательских иконок.

Надеюсь, это руководство окажется полезным для вас. Экспериментируйте и вы достигнете результата.

РедакцияПеревод статьи «How To Display Icons In WordPress Menu»

20+ бесплатных ресурсов для дизайна и веб-разработки

Иконки, элементы для создания интерфейсов, PSD-шаблоны, JavaScript-библиотеки и другие полезные ресурсы и инструменты для дизайнеров и веб-разработчиков.

Представляем большую подборку бесплатных ресурсов и инструментов, которые помогут вам эффективно работать над своими проектами.

Анимированные иконки погоды

Изображение: codepen.io Набор из 6 красивых анимированных CSS-иконок, которые можно использовать для изображения погоды.

Скачать

Векторные изометрические иконки

Изображение: oxygenna.

com Набор иконок, выполненных в изометрической проекции и изображающих различные устройства.

Oxygenna

Набор иконок для Android

Изображение: iconshock.com Большая коллекция векторных иконок для Android, среди которых есть бесплатные наборы для персонального использования.

Набор иконок

Шаблон брошюры для организации

Изображение: behance.net/gallery/23773605

Шаблон CV для дизайнеров

Изображение: www.behance.net/gallery/24416019

Набор иконок для детей

Изображение: designshock.com Большой набор милых иконок, сделанных таким образом, что их легко можно редактировать.

Набор иконок для детей

Бесплатный PSD UI Kit

Изображение: lucidsitedesigns.com Бесплатный набор элементов с минималистичным дизайном для создания пользовательских интерфейсов.

Бесплатный PSD UI Kit

UI Kit с плоским дизайном

Изображение: heybundle.com Набор для создания пользовательского интерфейса, сделанный для Photoshop и полностью редактируемый. Можно использовать как для персональных, так и для коммерческих проектов.

UI Kit с плоским дизайном

Простые формы для Sketch

Изображение: sketchappsources.com Базовый набор простых форм для создания веб-сайта в Sketch.

Простые формы для Sketch

PSD-шаблон для Landing page

Изображение: dribbble.com PSD-шаблон для создания целевой страницы, который хорошо подойдет для образовательных проектов в сфере технологий и программирования.

PSD-шаблон

Шаблон для создания email-клиента

Изображение: epicpxls.com Простой шаблон для Photoshop, содержащий все необходимые элементы для создания email-клиента.

Шаблон email-клиента

PSD-шаблон для одностраничного сайта

Изображение: frittt.com PSD-шаблон для создания минималистичного и элегантного одностраничного сайта любого типа: landing page, сайт организации или творческое портфолио.

PSD-шаблон одностраничного сайта

Шаблон одностраничного сайта в HTML5

Изображение: templated.co/retrospect Красивый шаблон, идеально подходящий для создания одностраничного сайта стартапа или небольшого бизнеса.

Шаблон одностраничного сайта в HTML5

CSS-эффекты для скроллинга страниц

Изображение: codyhouse.co Набор CSS-эффектов для скроллинга нескольких страниц.

CSS-эффекты

Кнопка с эффектом при наведении

Изображение: codepen.io

Кнопка с эффектом

Анимированное меню

Изображение: codepen.io Сниппет, который генерирует анимированное меню и который можно легко редактировать, благодаря CSS и JavaScript коду.

Анимированное меню

Анимированная кнопка поиска

Изображение: codepen.io Простая и эффектная кнопка поиска, которая превращается в поле для ввода при наведении на нее курсора.

Анимированная кнопка

debugCSS : (X)HTML debugging tool

Изображение: yahoo.github.io Инструмент, который поможет вам проверить HTML на предмет потенциально неработающего кода.

debugCSS

A11Y: проверка доступности веб-сайта

Изображение: addyosmani.github.io/a11y Онлайн-инструмент, с помощью которого можно проверить сайт на доступность для людей с ограниченными возможностями.

Проверка доступности веб-сайта

Meat!: платформа для коллаборации веб-разработчиков

Изображение: getmeat.io Платформа для установки на ваш сервер, с помощью которой вы сможете совместно работать над веб-проектами.

Платформа для коллаборации

Генератор кода

Изображение: webcodetools.com Генератор кода для CSS3, HTML5, microdata, open graph и Twitter, который вы впоследствии можете использовать на своем веб-сайте.

Генератор кода

Scally: CSS-фреймворк на Sass

Изображение: github.com/chris-pearce/scally CSS-фреймворк на Sass, BEM и OOCSS, хорошо подходящий для быстрого создания пользовательских интерфейсов.

CSS-фреймворк

Чат для командной работы

Изображение: sdelements.github.io/lets-chat Приложение для обмена сообщениями, созданное с помощью Node.js и MongoDB, идеально подойдет для небольшой команды, которой нужно общаться, работая над проектами.

Чат для командной работы

Создание программного обеспечения

Изображение: bazel.

io Инструмент от Google, который помогает сделать процесс разработки быстрым и надежным.

Создание программного обеспечения

Dynamics.js: библиотека JavaScript

Изображение: bypeople.com/javascript-physics-based-animations-library Небольшая JavaScript-библиотека, которая позволяет делать анимацию, основываясь на математических функциях и физике.

Библиотека JavaScript

Vibrant.js: выделение цветов из изображения

Изображение: jariz.github.io/vibrant.js JavaScript-библиотека, которая выделяет из загруженного изображения преобладающие на нем цвета.

Выделение цветов из изображения

Hummer.js: добавление тач-жестов

Изображение: hammerjs.github.io С помощью этой JavaScript-библиотеки можно добавить тач-жесты для любых DOM-элементов.

Добавление тач-жестов

Dokker.js: создание JavaScript-документации

Изображение: dokkerjs.com JavaScript-библиотека для создания документации.

JavaScript-документации

Как добавить иконки в меню WordPress – Лавка Вебмастера

Автор DeniDenx На чтение 3 мин Просмотров 849 Опубликовано 1 марта, 2021 Обновлено 5 марта, 2021

Вы уже могли заметить на моем блоге появились иконки в меню WordPress. Достаточно много популярных блогов используют такие иконки. Они привлекают внимание пользователя, заставляя его обратить свой взор на тот или иной элемент на вашем сайте. Ну и это просто красиво смотрится!

Если вы захотели себе такие же иконки, вы в нужном месте! Продолжайте читать и в этой статье я расскажу вам, как добавить иконки в меню WordPress с помощью плагина!

Добавляем иконки в меню WordPress через плагин

Безусловно самым простым способом является установка иконок с помощью плагина. Первым делом нам понадобится установить плагин Menu Icons by ThemeIsle, он достаточно прост и имеет поддержку множества библиотек иконок, таких как FontAwesome. Если вы не знаете как устанавливать плагины, обратитесь к статье — Как установить плагин WordPress.

Далее мы переходим к настройкам нашего меню. Внешний вид → Меню

Если у вас на сайте несколько разных меню, вы можете выбрать именно нужное вам. Затем выберите нужный элемент в меню, это может быть как рубрика, так и запись. Абсолютно любому элементу в меню можно задать свою иконку.

Также слева доступно меню, в котором вы можете выбрать библиотеку иконок, которую вы хотите использовать. Можно выбрать все, а можно только одну, как я. С помощью Image и SVG вы можете загружать свои изображения.

Каждая библиотека содержит свой CSS файл с настройками иконок. Выбрав все, вы автоматически добавляете их загрузку в head вашей страницы, даже если вы их не используете. Это может сказаться на скорости вашего сайта.
Рекомендую выбрать одну или две библиотеки и пользоваться ими. Мне хватает одной библиотеки — Font Awesome.

Как добавить иконку рубрики в меню

Открываем нужный элемент в вашем меню, у меня это рубрики и если вы всё сделали правильно, то должна появиться кнопка выбора иконки, нажимаем её.

У вас откроется большая библиотека различных иконок, вы можете пользоваться поиском по ключевым словам или сортировать их по группам.

Фильтр групп.
Поиск.
Выбор иконки.

После выбора нужной вам иконки, справа откроется возможность её настроить.

Вы можете скрыть текст ссылки, указать позицию (до/после ссылки), выравнивание и конечно же сам размер иконки, экспериментируйте и выбирайте то, что вам больше всего по душе.

Определитесь с настройками и не забудьте нажать на кнопку «Сохранить меню». Проверяем на своем сайте и наслаждаемся!

Украшаем иконки меню WordPress

По умолчанию, цвет ваших иконок будет такой же, что и текст ваших ссылок. У меня это чёрный, но можно это изменить с помощью дополнительных стилей CSS. Для этого нам необходимо узнать класс этих самых ссылок.

Для этого дела нам нужна панель разработчика (ctrl + shift + i), находим нашу иконку в коде и смотрим какой у нее класс. Далее, мы с легкостью можем задать цвет всему классу с помощью дополнительных стилей (Внешний вид → Настроить → Дополнительные стили) .

Задаем цвет иконки с помощью свойства color. Сохраняем и проверяем как всё отображается на нашем сайте.

Отлично! Всё шикарно работает. Экспериментируйте и подбирайте нужные вам цвета. Конечно, всё это можно сделать руками, без плагинов, но об этом мы поговорим уже в следующей нашей статье.

Лучшие библиотеки иконок для повышения производительности (WordPress)

При создании веб-сайта вы, скорее всего, захотите включить библиотеку значков. Самая популярная библиотека значков для WordPress — это, вероятно, отличный шрифт, но, к сожалению, он не очень хорош для производительности. Если вы хотите включить значки в свой будущий проект по дизайну веб-сайтов, ознакомьтесь с этими лучшими библиотеками значков для повышения производительности.

При выборе хорошей библиотеки значков с точки зрения производительности и скорости страницы веб-сайта важно учитывать вариант использования.Во многих ситуациях вы можете выбрать гораздо меньшую библиотеку или модуль из более крупной библиотеки вместо того, чтобы включать все на веб-сайте.

Есть и другие соображения. Иногда еще одна хорошая идея — заменить библиотеку значков небольшой коллекцией изображений SVG. Если вы пытаетесь добиться высокой производительности и очень быстрой загрузки веб-сайта WordPress, библиотеки значков не всегда лучший выбор. Однако, если вы ищете лучшие библиотеки значков для повышения производительности веб-сайта WordPress, продолжайте читать эту статью.

Мы использовали большинство из них в производственных проектах, и у нас есть большой опыт работы с ними. Кроме того, все перечисленные здесь библиотеки значков бесплатны и имеют открытый исходный код.

Значки материалов Google

Значки материалов Google невероятно хорошо спроектированы, имеют современный вид и относительно легкие по сравнению с другими библиотеками. Они на 100% имеют открытый исходный код и варьируются от всего, включая спорт до автомобилей. Если вам нужна хорошая библиотека значков, мы настоятельно рекомендуем ее и использовать на многих наших производственных веб-сайтах.

Юниконы

Unicons — это новое предложение, представленное в виде веб-шрифтов или значков SVG, включает более 3000 отдельных шрифтов с несколькими стилями, и самое лучшее в них то, что они бесплатны. Нам очень нравится эта библиотека, потому что она новая и легкая. Если у вас есть бюджет для ваших значков, выбор монохромного пакета премиум-класса действительно может улучшить ваш дизайн.

FontAwesome

Вы можете спросить: «Почему в эту статью включен отличный шрифт, если во вступительном абзаце об этом говорится не так?»

Здесь следует отметить, что сами значки созданы неплохо, но библиотека настолько велика, что включение ее всего в начальную загрузку вашего веб-сайта — это большой недостаток, когда дело касается производительности.С учетом сказанного, если вы включите только те значки, которые собираетесь использовать, используя метод, описанный ниже, тогда отличные значки шрифтов станут отличным решением.

Но вы не можете включить всю библиотеку, как это делают многие плагины и темы WordPress, вместо этого вы должны включать только те значки, которые вы используете.

Линейные значки

Как следует из названия, этот набор значков состоит из линий, но не резких, как значки материалов. Нам это очень нравится для более элегантных веб-сайтов, а бесплатной версии обычно более чем достаточно.

Как сделать так, чтобы ваш сайт WordPress с помощью библиотек значков загружался быстрее

, если вы беспокоитесь о производительности вашего веб-сайта WordPress при использовании библиотеки значков, хороший способ ускорить его загрузку — это разместить его на собственном хостинге и поместить файл в очередь на свой сайт (вы можете использовать собственный фрагмент кода или сделать плагин). Это уменьшает количество HTTP-запросов, а за счет исключения сторонних запросов ваш веб-сайт будет загружаться намного быстрее.

Другой метод — это загрузка только тех значков, которые, как вы знаете, вы используете в период своего веб-сайта WordPress, для этого вы можете использовать инструмент IcoMoon, чтобы выбрать пакет с используемыми вами значками и самостоятельно разместить его. Делая это, вы действительно загружаете только необходимые данные, что приводит к максимально быстрой загрузке вашего веб-сайта в отношении ваших библиотек значков.

Существуют полные учебные пособия, которые вы можете легко найти в Интернете, но очень быстро, все, что вам нужно сделать, это купить или загрузить свой пакет значков, выбрать значки, которые вы хотите включить в файл шрифта, а затем сгенерировать связанный CSS и шрифт. файловый период, просто установите его на свой веб-сайт WordPress, и все готово. Вы загружаете только необходимые данные в отношении иконок.

Заключение

Мы надеемся, что эта статья ответила на ваш вопрос о том, какие библиотеки значков лучше всего подходят для работы. Если вы создаете веб-сайт WordPress или любой другой веб-сайт, значки необходимы. Однако многие библиотеки значков снижают производительность вашего цифрового актива. Перечисленные выше имеют хороший баланс между размером файла и разнообразием. Если у вас есть какие-либо другие рекомендации из библиотеки значков, не стесняйтесь оставлять их в разделе комментариев ниже.

10 источников бесплатных коммерческих веб-иконок — блог Planet Argon

Иконки — большая часть веб-дизайна. Элегантный набор связанных значков действительно может объединить веб-страницу, а неудачный выбор может сделать ваш сайт любительским. Если вы действительно изобретательны, вы можете создать свои собственные значки, чтобы они выглядели идеально. Но, скорее всего, у вас мало времени, и создание с нуля — не самый эффективный выбор для вашего проекта.

Чтобы помочь вам, мы составили список из 10 источников, на которые вы можете ссылаться, когда вам понадобятся значки.На всех этих сайтах есть варианты значков с коммерческой лицензией (хотя для некоторых требуется ссылка в нижнем колонтитуле, поэтому проверяйте лицензию каждого сайта, прежде чем использовать какие-либо значки).

Хотя многие предложения Icon Finder доступны только по платной подписке, есть масса отличных значков, доступных для коммерческого использования (как с обязательной ссылкой, так и без обратной), которые вы можете попробовать. После поиска нужного типа значка отфильтруйте результаты по «Бесплатно» и «Без обратной ссылки» в строке поиска.

У них есть значки, начиная от перевернутых кошек и заканчивая батареями, и все промежуточные ниши. Некоторые из наших любимых коллекций включают эти значки в виде плоских цветных кружков.

И эти значки с изогнутыми линиями.

Совет : Вы можете загрузить многие из этих значков в формате SVG или PNG. Если вы читаете это и не являетесь веб-разработчиком или профессиональным графическим дизайнером, возможно, вы используете Canva с этой графикой. В зависимости от типа SVG вы можете загрузить эти значки в Canva и изменить их цвета в интерфейсе Canva.Это упрощает создание графики для блога или простых изображений заголовков.

Если ваш стиль графики немного более ретро, эти значки от Frexy на Dribbble идеально подходят. Эта коллекция, от фруктового мороженого до кнопок, придает неповторимый вид любой странице. В мире чистых линий и монохромности эти ретро-иконы обладают большим шармом.

Эти линейные значки, вдохновленные iOS 7, максимально упрощены. Если вашей веб-странице или дизайну требуется минималистичный вид, они идеально подойдут к вашему стилю.Они доступны в форматах 30 и 60 пикселей, а также в форматах PSD, AI и EPS.

Итак, Freepik — это не 100% бесплатно, если вы не хотите указывать авторство. Хотя большинство их коллекций значков доступны для коммерческого использования, требуется обратная ссылка на их сайт — если вы не хотите платить членский взнос в размере 9,99 долларов в месяц. Эта небольшая плата дает вам доступ к гораздо большему количеству значков и позволяет использовать все эти значки без указания авторства.

Этот набор красочных веб-значков и технологических значков (в комплекте с рыбой, зубом и рожком мороженого?) Привнесет радость в вашу веб-страницу.Но независимо от того, какой стиль вы выберете, вы наверняка найдете здесь подходящий набор.

FontAwesome стал популярным вариантом для веб-иконок CSS. Вы увидите их значки повсюду в Интернете, потому что это открытый исходный код, масштабируемый любого размера и не требующий JavaScript. Каждый значок легко разместить после установки FontAwesome.

Имея на выбор более 675 иконок, вы, вероятно, сможете найти идеальную форму для обозначения любого действия. Хотя FontAwesome прост с эстетической точки зрения, их символы ясны и разнообразны.

Icons8 является домом для значков социальных сетей, множества стрелок и многого другого. Вы даже можете просматривать по системному стилю, например iOS 10 и Android 4. Их бесплатный план ограничен загрузкой только в формате PNG и требует обратной ссылки, но ежемесячная подписка включает форматы EPS и SVG и не требует ссылки.

Fontello извлекает из нескольких различных библиотек значков в одну базу данных значков с возможностью поиска. Однако, помимо того, что Fontello является источником библиотек значков, он также является инструментом для компиляции векторных изображений в веб-шрифты. Вы можете узнать больше о его возможностях на Fontello Github.

Icon Shop — один из немногих в этом списке, который не требует обратной ссылки для любого из своих значков. Все они на 100% бесплатны для коммерческого использования. Их библиотека не такая широкая, как другие варианты, но большинство фигур имеют несколько вариантов цвета (черно-белый, плоский или полноцветный) и доступны в SVG, PNG, AI и PSD. Каждый значок загружается в виде ZIP-файла со всеми этими параметрами.

Flat Icon предлагает как бесплатные, так и премиальные веб-иконки, сгруппированные в коллекции по стилю и теме.Большинство коллекций доступны в форматах PNG, SVG, EPS и PSD, поэтому вы можете свободно редактировать любой проект, который вам нужен. Если вы работаете в сфере технологий, эта коллекция значков для SEO и маркетинга может быть особенно полезна для вашего проекта.

GraphicLoads Freebies раздел — это популярная библиотека с множеством различных ресурсов для графического дизайна. Вы найдете библиотеки значков, смешанные с шаблонами рождественских открыток. Но есть несколько драгоценных камней, которые можно найти бесплатно на этом сайте.Иконки сгруппированы по стилям и категориям в коллекции, поэтому вы можете сразу загрузить большой набор для использования на своем веб-сайте или в документе. Эта коллекция значков обводки, изображенная ниже, является лишь одним из примеров значков, которые вы найдете.

Надеюсь, эта коллекция ресурсов значков сделает вашу следующую охоту за идеальной иконкой немного короче. Есть ли у вас какие-нибудь любимые источники веб-иконок? Оставьте комментарий ниже и дайте нам знать.

10+ отличных библиотек значков CSS и Javascript 2020 — Bashooka

Для разработчиков и дизайнеров выбор формата значков для отображения значков в проектах веб-дизайна может оказаться сложной задачей.Поиск подходящего значка для ваших веб-проектов может занять много времени. Поиск правильного цвета, размера и формата после того, как у вас есть нужные значки, — это еще один этап этой борьбы. Вот 10+ потрясающих библиотек значков CSS и Javascript 2020, которые предоставляют бесплатные значки различных размеров и форматов, чтобы удовлетворить все ваши потребности при работе над проектом веб-дизайна!

Раскройте потенциал WordPress Ad

Великолепная коллекция из 11000+ тем WordPress, включая шаблоны начальной загрузки и ресурсы дизайна

Скачать сейчас

Системные символы

System UIcons — это дизайн библиотеки иконок для систем и продуктов.Используйте как хотите, без указания авторства.

Иконки Tabler

Набор из более 550 бесплатных высококачественных значков SVG, лицензированных MIT, для использования в ваших веб-проектах.

Героиконы

Набор бесплатных высококачественных SVG-значков с лицензией MIT для разработки пользовательского интерфейса.

Икотар

Icotar создает простые игривые аватарки для вашего приложения или веб-сайта. Созданный на основе милых аватаров от Yik Yak, каждый аватар состоит из красочного фона и узнаваемого символа.Все цвета и значки подобраны вручную из Material Design.

Coreui Иконки

CoreUI Icons — это набор значков с открытым исходным кодом, содержащий более 1500 значков в различных форматах SVG, PNG и Webfonts. Иконки CoreUI — это красиво оформленные символы для общих действий и элементов. Вы можете использовать их в своих цифровых продуктах для Интернета или мобильных приложений.

Css.gg

Минималистичная библиотека иконок Разработано с помощью кода. Настраиваемые значки с поддержкой Retina, полностью встроенные в CSS.

Иконки

Bootstrap предназначены для работы с компонентами Bootstrap, от элементов управления формы до навигации. Иконки Bootstrap — это SVG-файлы, поэтому они легко и быстро масштабируются и могут быть стилизованы с помощью CSS. Хотя они созданы для Bootstrap, они будут работать в любом проекте.

React Unicons

Более 1000 векторных иконок в виде простых в использовании компонентов React.

Иконистический

Встречайте культовых! Набор иконок из 150+ бесплатных иконок для ваших проектов.

Значки файлов CSS

Иконки на чистом CSS для популярных расширений файлов.

CaoMei

Предназначен для разработчика и создателя.

Боксиконы

Это тщательно разработанный набор значков с открытым исходным кодом, содержащий более 1000 значков. Он создан для того, чтобы сделать ваш сайт / приложение более привлекательным.

Вилка Awesome

Fork Awesome — это полный набор из 757 пиктографических значков для легкой масштабируемой векторной графики на веб-сайтах, первоначально созданный Дэйвом Ганди, а теперь поддерживаемый сообществом.

Iconicss

Каждый значок использует один элемент привязки (один div) и только один цвет: currentColor (и прозрачный), за исключением цветных значков (как следует из названия). Таким образом, их можно легко включить на страницу с помощью одного элемента HTML и использовать текущий цвет и текущий размер шрифта.

11 бесплатных библиотек значков для вашего проекта начальной загрузки — BootstrapBay

Создание значков — это трудоемкий процесс, и если у вас нет необходимых знаний, на его создание уйдет огромное количество времени.

В этом сообщении блога представлены 11 лучших ресурсов бесплатных иконок для вашего проекта Bootstrap.

Но перед этим я хотел бы кое-что сказать о Bootstrap и значках.

Что такое Bootstrap?

Bootstrap — это мощный, бесплатный CSS-фреймворк с открытым исходным кодом, который позволяет быстро создавать потрясающие дизайны. Создание дизайна с использованием только CSS займет очень много времени. Таким образом, вместо использования только CSS вы можете добавить код Bootstrap (помимо пользовательского CSS) в свой проект и ускорить процесс своей работы.

Зачем нужны иконки

Иконки — это важные элементы продукта, такого как веб-сайт, мобильное приложение или любое другое приложение. Они не только украшают ваше приложение, но и помогают пользователям понять его функции. Например, значок поиска в поле поиска улучшает внешний вид окна поиска, а также помогает пользователю быстро его понять.

Как импортировать значки на свою страницу

Пожалуйста, прочтите это руководство от FontAwesome.com, чтобы узнать, как правильно импортировать значки и включать их на свои веб-страницы.

11 лучших ресурсов с красивыми бесплатными иконками

Иконки начальной загрузки

Одним из удивительных преимуществ использования Bootstrap является то, что он поставляется с бесплатной библиотекой значков. Bootstrap Icons — это фантастическая библиотека иконок, очень подходящая для компонентов Bootstrap. Эти значки бесплатны и имеют открытый исходный код. Таким образом, вы можете не просто использовать их, но и настраивать.

Более подробную информацию об этом пакете значков можно найти на официальном сайте Bootstrap.

Загрузка / Подробнее

Потрясающий шрифт

Font Awesome — одна из самых популярных библиотек иконок и наборов инструментов, доступных в Интернете. У него есть бесплатная и премиум версия. На данный момент в нем 1588 бесплатных иконок и 7842 премиум-иконки. Текущая версия 5.13.0 на момент написания этого поста. Скоро выйдет Font Awesome 6 с множеством новых интересных иконок, стилей и сервисов. Этот набор значков предлагает вам самые удивительные логотипы социальных сетей и векторные иконки. Он предоставляет вам идеальные, удобные для рабочего стола, проверенные и проверенные значки практически для всех целей.

Загрузка / Подробнее

Iconfinder

Iconfinder — еще один отличный ресурс для красивых иконок с бесплатными и платными планами. Он предоставляет вам значки в различных форматах, таких как SVG, CSH и PNG. В настоящее время на их сайте более 4 450 000 иконок. Iconfinder предлагает вам значки нескольких категорий.

Загрузка / Подробнее

Freepik

Freepik — это потрясающая библиотека значков, которая дает вам более 83000 бесплатных потрясающих значков в форматах PNG, EPS и SVG.Вы можете использовать эти значки в личных и коммерческих целях бесплатно. Этот сайт предоставляет вам широкий выбор значков, которые вы можете использовать для своих проектов.

Загрузка / Подробнее

Флатикон

Flaticon — это огромная библиотека значков, в которой представлены значки различных типов. Доступные форматы значков в этой библиотеке: PNG, SVG, PSD, EPS и BASE 64. Этот веб-сайт предоставляет вам большую коллекцию потрясающих бесплатных и дополнительных значков. Согласно официальному сайту, Flaticon выпускает более 60 000 иконок каждый месяц.

Загрузка / Подробнее

IcoMoon

Имея более 5500 бесплатных и 4000+ премиальных значков, IcoMoon является надежным поставщиком высококачественных значков с идеальным пикселем, которые можно использовать для мобильных, настольных и веб-приложений, а также для различных других типов проектов. Он предоставляет вам базовое редактирование глифов и генератор шрифтов значков. Приложение IcoMoon позволяет конвертировать ваши значки в разные форматы.

Загрузка / Подробнее

Проект существительное

The Noun Project — это потрясающий ресурс с более чем 2 миллионами иконок, созданных замечательным сообществом дизайнеров.Он позволяет настроить каждый значок так, чтобы он отлично смотрелся в ваших продуктах. Доступны бесплатные и премиальные планы.

Загрузка / Подробнее

Библиотека иконок Orion

Библиотека значков

Orion — это относительно новая библиотека значков, которая предоставляет вам потрясающие значки. У них есть бесплатные и профессиональные планы. При использовании профессионального плана для использования значков в ваших проектах авторство не требуется. С этой библиотекой вы также получаете веб-приложение для настройки ваших значков.

Загрузка / Подробнее

Иконки8

Icons8 дает вам более 130 900+ бесплатных иконок нескольких типов. Этот веб-сайт предлагает вам бесплатные и платные значки, которые выглядят единообразно, поскольку созданы одной командой дизайнеров. Он дает вам код для вашего значка, чтобы вы могли вставить его на свою HTML-страницу.

Загрузка / Подробнее

Хорошие вещи, без глупостей

Как следует из названия, на нем только хорошие иконки. Он предоставляет вам высококачественные, креативные, нарисованные от руки, бесплатные и недорогие значки. Вы можете скачивать иконки в разных форматах. Good Stuff No Nonsense также позволяет создавать собственные значки.

Загрузка / Подробнее

iconmonstr

iconmonstr — это потрясающий ресурс с потрясающими, креативными, бесплатными иконками. На момент написания этого сообщения в блоге было более 4 496 бесплатных иконок. Этот веб-сайт сэкономит вам массу времени, поскольку вам не нужно создавать значки с нуля. Иконки на этом сайте выглядят просто потрясающе.

Загрузка / Подробнее

Это сообщение в блоге предоставило вам 11 бесплатных библиотек значков для вашего проекта Bootstrap. Надеюсь, этот список был вам полезен!

Поделиться — это забота!

Начало работы с Icomoon | Acquia Cohesion Docs

Icomoon — это библиотека значков шрифтов, которую можно использовать с Acquia Cohesion.В этом руководстве содержится информация о том, как правильно подготовить библиотеку шрифтов Icomoon для добавления в Acquia Cohesion. Найдите дополнительную информацию о настройке библиотек шрифтов значков.

Для получения более подробной информации о Icomoon, пожалуйста, обратитесь к официальной документации Icomoon.

Вы можете загрузить только один значок шрифта Icomoon, который должен использовать Icomoon в качестве семейства шрифтов. В нашей дорожной карте разрешено использование нескольких шрифтов для значков Icomoon.

Подготовка библиотек шрифтов значков Icomoon для Acquia Cohesion

Чтобы начать работу с библиотекой шрифтов значков:

Шаг 1. Создайте учетную запись Icomoon

Для настройки библиотеки шрифтов значков вам потребуется учетная запись Icomoon. Посетите страницу регистрации, чтобы создать учетную запись, или войдите в существующую учетную запись.

Шаг 2 — Создайте новый проект

Запустите приложение Icomoon, нажав кнопку Приложение Icomoon на главной странице
Перейдите к экрану «Проекты», щелкнув меню и выбрав Управление проектами . Кроме того, вы можете перейти по URL-адресу проекта напрямую, войдя в систему.

Шаг 3. Настройте библиотеку шрифтов значков

На экране проекта щелкните Загрузить справа от проекта
Щелкните Добавить значки из библиотеки шрифтов и выберите нужную библиотеку
Выберите значки в наборе, который вы хотите включить в библиотеку шрифтов
Щелкните Создать шрифт внизу страницы.

Есть много разных вариантов, как платных, так и бесплатных. В этом примере был выбран набор Icomoon — Free .

Вы также можете импортировать пользовательские значки в свою библиотеку. Это должны быть файлы .svg. Чтобы импортировать значки, нажмите кнопку Импортировать значки и выберите их на локальном диске.

Шаг 4. Загрузите шрифт значка и файлы JSON.

Чтобы загрузить файл JSON и файлы шрифтов значков:

Перейти к экрану «Проекты»
Щелкните Загрузить справа от проекта
Щелкните Создать шрифт в правом нижнем углу экрана
Нажмите Скачать в правом нижнем углу экрана
Это предоставит вам файл.zip файл

Шаг 5. Распакуйте и извлеките значок шрифта и файлы JSON.

После загрузки файла .zip из Icomoon

Распакуйте файл, чтобы извлечь Fonts и JSON (показано ниже)
Создайте новый файл .zip только для папки Fonts.
No related posts.