Открытая библиотека значков — 17540 значков

Скачивание бесплатных иконок

Эта библиотека содержит значки компьютеров (. ico файлы) для систем Microsoft Windows. Каждый файл .ico содержит несколько изображений с разной глубиной цвета и размером. Значки можно загружать как файлы .ico или как отдельные изображения .png. Узнать больше об иконках.

Последние наборы иконок

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

Просмотреть все наборы значков

Щелкните число выше, чтобы открыть страницу с 40 наборами значков. Наборы иконок отсортированы по дате.

Свалка иконок

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

Добавление ваших иконок в библиотеку

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

• Получите RealWorld Icon Editor (вы можете использовать его в течение 30 дней бесплатно).
• Откройте файл значка и щелкните команду «Значок» -> «Добавить в онлайн-библиотеку» в меню приложения.
  • При загрузке используйте тот же адрес электронной почты, который связан с вашей учетной записью на этом сервере.
  • Тщательно выберите имя файла и введите описание.Это помогает людям найти ваш значок при использовании поля поиска.
• Значки по умолчанию добавляются в категорию «Неклассифицированные». Если вы уже добавили несколько значков с похожей темой, и вы хотите, чтобы они превратились в набор значков, зарегистрируйтесь или войдите и вернитесь на эту страницу.

Лучшие бесплатные пакеты иконок. Вот несколько наборов иконок в одном… | Автор: Ника Бабич

Вот несколько наборов иконок в едином стилистическом оформлении.Все они представлены в различных форматах: @ font-face, SVG, EPS, AI, PSD, Sketch. Может быть полезно для дизайна Android и iOS.

Всего: 1000+
Формат: SVG, Webfont
Лицензия: Международная лицензия Creative Common Attribution 4.0 (CC-BY 4.0)

Всего: 100 (3 разных размера сетки: 16×16, 32×32 и 64×64).
Формат: AI, EPS, SVG, PSD

Всего: 100+
Стиль: Базовый, Праздники
Формат: Webfont
Лицензия: Лицензия Open Font

Всего: 730+
Стиль: Общие, Музыка, Электронная торговля, Программное обеспечение, Разработка , Arrows, Weather
Формат: SVG, Webfont
Лицензия: Creative Commons Attribution 4.0 Международная лицензия.

Всего: 312
Формат: SVG
Лицензия: Good Boy License

Всего: 80
Формат: AI, PSD

Всего: 750+
Формат: Webfont
Лицензия: MIT

Всего: 340 (24 x 24 пикселей )
Формат: SVG, AI, PSD

Всего: 100+
Формат: AI, EPS, SVG, PSD
Лицензия: Бесплатная загрузка и распространение

Всего: 60
Формат: Png, SVG, EPS, PSD, AI

Всего: 50 (50 пикселей)
Формат: PSD

Всего: 231
Формат: SVG, Webfont

Всего: 100
Формат: SVG

Всего: 100
Формат: Webfont

Всего: 100
Формат: AI , EPS, SVG, Webfont

Всего: 200
Формат: SVG

Всего: 100
Формат: Webfont
Лицензия: MIT Open Source License

Всего: 100 (48 × 48 пикселей)
Формат: AI, EPS

Всего: 320+
Формат: SVG, Webfont
Стиль: стрелки, веб-приложения, элементы управления, текстовый редактор, макет, бренд

Всего: 50
Формат: PSD, AI, EPS, PNG, SVG

Всего: 92
Формат: AI, PNG, EPS, SVG

Всего: 100 (32×32 пикселей и 64×64 пикселей)
Формат: AI, SVG, PNG, Webfount

Всего: 202 (от 16×16 пикселей до 128×128 пикселей)
Формат: Webfont

Всего: 50
Формат: EPS, AI, PNG

Всего: 80
Формат: PSD, AI, Webfont

Всего: 36
Формат: SVG , PNG, PSD

Всего: 65+
Формат: PNG

15 основных бесплатных наборов иконок

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

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

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

1. Минимальный бесплатный Icon Pack

Этот бесплатный минимальный набор значков содержит 1800 значков в форматах SVG, EPS, PSD, AI, SKETCH и PNG. Набор иконок представлен как в черном, так и в белом вариантах и ​​может использоваться как в личных, так и в коммерческих проектах.

2. Бесплатные плоские иконки

Набор значков из Icons8 включает более 40000 значков, охватывающих несколько категорий; от бизнеса и офиса до людей, еды и значков социальных сетей.Значки предназначены для имитации внешнего вида конкретной операционной системы, и вы можете загрузить их в версиях для Windows, iOS и Android. Все значки можно перекрашивать, есть даже приложения для Windows и Mac, чтобы вы могли использовать их в таких приложениях, как Photoshop.

3. Eldorado + Stroke 3132 Mini Free Icons

Eldorado + Stroke 3132 mini — это бесплатная версия значков Eldorado + Eldorado Stroke, которая содержит в общей сложности 3132 значка в формате PNG. Значки одноцветные и включают в себя такие категории, как «Базовый», «Культура», «Устройства», «Финансы» и т. Д.

4. Iconmonstr

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

5. 48 бесплатных иконок Flat Designer

Этот бесплатный набор из 48 иконок для офиса, социальных сетей и путешествий наверняка пригодится для вашего следующего проекта, связанного с путешествиями или корпоративным веб-сайтом.Иконки доступны в форматах AI и PNG и представлены в ярком монохромном коралловом и многоцветном вариантах.

6. Пакет значков социальных сетей

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

7. 210 Миниконы Vector

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

8. 30 изометрических иконок

Если ваш проект вращается вокруг бухгалтерской отрасли, рассмотрите этот набор из 30 изометрических значков с диаграммами, графиками, папками и т. Д. Иконки представлены в форматах AI, EPS и PNG и могут быть полностью отредактированы по своему усмотрению в Adobe Illustrator.

9. Ретро-иконы

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

10. Набор иконок Metro UI

Поклонникам стиля Metro стоит попробовать набор иконок Metro UI, который включает более 700 иконок двух размеров. Значки доступны в формате PNG, а также в формате .ICO.

11. 40 Иконок дизайна

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

12. 83 Плоские иконки UX и электронной коммерции

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

13. 30 Иконки погоды

Этот набор иконок погоды — отличный выбор для любого погодного приложения или метеорологического веб-сайта.Вы можете выбирать между 30 различными значками в форматах ЭСКИЗ и PNG.

14. Набор иконок «Земля и космос»

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

15. Набор иконок Nucleo Flat Business

Последний набор в нашем списке включает 50 иконок в современном плоском стиле, которые дополнят любой корпоративный сайт.Иконки доступны как в формате AI, так и в формате SVG.

Руководство дизайнера пользовательского интерфейса по дизайну значков приложений (бесплатный набор значков)

Важность иконографии

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

Иконки — важная часть нашей повседневной жизни. Посмотрите вокруг, и вы увидите столько же инструкций, сколько и иконографию. Это настолько важная часть нашего мира, что даже в фильмах есть правдоподобные системы иконок.Посмотрите Typeset In The Future: The Alien Edition.

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

Что вы узнаете

Это руководство создано, чтобы помочь дизайнерам создать собственный набор значков, который поможет им реализовать свое видение. Он наполнен полезными советами, передовыми методами и руководствами по тому, как мы делаем что-то в Headway.

‍

Перед тем, как начать

Какие значки вам нужны для успеха?

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

Создаете или находите набор иконок?

Создание полного набора значков поможет вам добиться единообразия во всем приложении. Если вы не хотите создавать его с нуля, существуют инструменты, которые помогут вам найти полные наборы значков. Noun Project и Iconfinder — отличные ресурсы, если вы ищете полный пакет. Если вы не собираетесь создавать набор, приведенный ниже, все же есть несколько отличных моментов, на которые стоит обратить внимание в пакете.

Получите бесплатный набор значков

‍

Идеи для набросков и создание набора

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

Если вы ищете вдохновения, загляните в такие места, как Dribbble, Iconfinder и Noun Project, чтобы узнать, что делают другие. Эти ресурсы бесценны, поэтому используйте их. Когда дело доходит до Noun Project или Icon Finder, если у вас есть подписка, вы также можете захватывать значки, чтобы разместить их в своем наборе в качестве заполнителей, пока не закончите свой набор. Подобный набор инструментов поможет вам начать думать о вашей системе в целом.

‍

Стили значков

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

Давайте рассмотрим три элемента дизайна, которые влияют на стиль иконки.

Обводка

Значки обводки позволяют добавить больше деталей, чем заполненный набор. Их можно смешивать с заполненным набором, чтобы создавать либо активные состояния, либо дополнять некоторые значки, которые просто не работают с заполненным состоянием.

Заливка

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

Цвет

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

‍

Рекомендации по дизайну значков

Анатомия хорошей системы значков и значков

Хорошая система значков согласуется не только друг с другом, но и с общим дизайном их окончательного размещения.

В зависимости от платформы, которую вы создаете, иконки создаются множеством различных способов. Каждая мобильная ОС имеет собственное руководство по созданию значков для своей системы. Ниже мы изложили некоторые общие моменты, которые следует учитывать при создании значка.

Принципы работы с иконками в материальном дизайне

Руководства по иконкам и изображениям iOS

‍

Размер значка

При создании значков должны соблюдаться некоторые основные правила по размеру. Примите во внимание устройство, на котором будут отображаться эти значки, и способ взаимодействия (мышь или касание, а в большинстве случаев и то, и другое).Придерживаясь значка 24×24 пикселей, можно начать с середины значка дороги. Если вы хотите что-то меньшее, значок 20×20 пикселей также хорош и отлично работает для плотных дисплеев, где мышь будет основным методом взаимодействия.

‍

Сетки значков

Сетка значков, независимо от того, как вы ее создаете, должна быть сеткой в ​​1 пиксель. Начиная с квадрата 24×24 пикселей, вы сможете создавать иконки независимо от платформы. Большинство инструментов дизайна позволяют экспортировать ресурсы в 2 раза, чтобы вы могли легко достичь минимума 48×48 пикселей, установленного Apple.Если вам нужны значки меньшего размера на платформе, такой как Интернет, вы также можете попытаться сделать значки плотными и настроить сетку на 20×20 пикселей.

‍

Область содержимого

Сохранение периметра в 2 пикселя внутри базовой сетки не дает значкам тесноты. Например, ваш контент на значке 24px не должен превышать 20px. Точно так же на более мелком / плотном значке они не должны превышать область содержимого 18 пикселей. Это также уменьшит размер цели, но создаст более крупный хит-бокс и поможет с некоторой базовой точностью выбора.

‍

Padding

В вашем значке этот периметр 2 пикселя действует как отступ, встроенный прямо в сам значок.

‍

Размещение и сенсорные области

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

Например, если у вас значок 24 пикселей, сенсорные области должны быть 48 пикселей.Если у вас есть значок 20 пикселей, сенсорная область должна быть 40 пикселей. Эта сенсорная область может быть встроена непосредственно в ваши значки при создании системы значков для удобного размещения или может быть частью вашего набора пользовательского интерфейса в вашем компоненте значков.

‍

Лучшие практики дизайна иконок

Вот несколько лучших практик, которые мы определили как команда в Headway.

Stroke

• Stroke Width — Всегда сохраняйте постоянную толщину обводки, обычно мы выбираем обводку 1px или 2px.
• Размещение обводки — Сохранение обводки по центру позволит сохранить согласованность дизайна между закрытыми векторными формами и открытыми.
• Пиксельные направляющие — Когда вы надели пиксельную направляющую, следите за тем, чтобы обводка находилась в центре пикселя, это поможет вам избежать размытых линий на самых маленьких размерах PNG. Поскольку он не пытается рисовать между 2 пикселями.
• Расстояние — между элементами должно быть примерно одинаковой ширины. Придерживаясь промежутка в 2 пикселя, вы сохраните хорошее пространство для негативного пространства и сохраните видимость.
• Колпачки — Большинство инструментов позволяют вам выбрать, какой тип колпачков вам нужен. Вы можете закруглить концы или оставить их квадратными. В зависимости от стиля, который вы выберете, каждый из них будет работать, просто помните, что при добавлении кепки вы добавляете заливку примерно на один пиксель в конец каждого вектора.
• Углы — Каждый инструмент позволит вам изменить способ работы углов. Вы можете оставить их по умолчанию, которые будут иметь жесткие углы 90 градусов, есть также закругленные и угловые.

Заливка

• Интервал — Когда дело доходит до значков с заливкой, самое важное, на что нужно обращать внимание, — это использование отрицательного пространства. Сохранение зазора в 2 пикселя в большинстве пятен поможет создать красивое негативное пространство.
• Уловки со смещением — Такие уловки, как уловки со смещением линии, могут помочь сохранить негативное пространство на одной стороне, и вам не придется беспокоиться о том, чтобы израсходовать слишком много места. (прорезанный глаз)

Цвет

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

Размер и масштабирование

• Обводка по сравнению с вектором — когда дело доходит до масштабирования значков или увеличения их размера, нужно подумать о двух вещах.Если вы хотите, чтобы обводка всегда была однородной, независимо от размера, вы можете установить для линий значение обводки в выбранном вами инструменте. Если вам не нужны одинаковые веса, вы можете свернуть свои фигуры в векторный объект или использовать .svg. Тогда вес линии будет масштабироваться в соответствии с размером фигуры.

Экспорт

PNG

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

• Прозрачность — мы должны убедиться, что фоны прозрачны, чтобы мы могли легко размещать эти объекты
• Цвет — если наши значки меняют цвета для состояний, нам нужно убедиться, что мы экспортируем каждый вариант этого значка .
• Размер — при экспорте файлов PNG мобильному устройству потребуется несколько размеров.
• iOS потребует 3 общих размера.
• 24×24 @ 1x
• 48×48 @ 2x
• 72×72 @ 3x
• Android потребует всего 5 размеров.
• 48 × 48 (mdpi)
• 72 × 72 (hdpi)
• 96 × 96 (xhdpi)
• 144 × 144 (xxhdpi)
• 192 × 192 (xxxhdpi)

‍

SVG Когда

Контрольный список подготовки SVG, который поможет вам подготовить значки к экспорту.

‍

Соглашения об именах для значков

Наше стандартное соглашение об именах соответствует этому основному формату:

ico — имя глифа — модификатор @ масштабный коэффициент. Формат файла

Пример: ico-search-dark @ 2x.svg

‍

Почему мы следуем этому соглашению об именах

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

• Ico — сообщает команде, что это файл значка
• Имя глифа — описательное имя значка
• Модификатор — Чем этот значок может отличаться от базовой версии
• Это очень важен для мобильных устройств, поскольку мы все еще используем.PNG файлы в настоящее время на мобильных устройствах.
• Коэффициент масштабирования — Ваши инструменты должны автоматически добавлять его в конец файла, когда вы настраиваете несколько экспортов. Это позволит устройствам выбрать нужный размер значков и будет экспортировать значки с этим коэффициентом масштабирования. Например, версия @ 2x значка 24px будет экспортировать с разрешением 48×48 пикселей
• Формат файла — Ваш инструмент также добавит это к имени файла, когда вы выберете, какой тип значка вы экспортируете.Просто помните, что .PNG — это файл растрированного изображения, а .SVG — векторный.

‍

Работа в Figma — создание и управление значками

Использование фреймов

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

Сетки

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

Векторная сеть

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

Сворачивание фигуры

Если вы создаете сложную форму значка и используете маски и несколько векторных фигур, вы можете свернуть свою фигуру, нажав CMD + E.

Обводка

Настройки: здесь есть внутри, снаружи, центр и вес.Вы также можете настроить способ работы заглушек и углов.

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

‍

Free Icon Pack — Загрузите

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

👉 Получите бесплатный пакет значков

‍

Следующие шаги — от значков до наборов пользовательского интерфейса

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

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

‍

famfamfam.com: Silk Icons

Шелковые иконы

«Шелк» — это гладкий бесплатный набор иконок, содержащий более 700 Иконки размером 16 на 16 пикселей в невероятно мягком формате PNG. Вы уверены, что содержит большое количество разнообразных значков найти что-то, что порадует вас. И все по невысокой цене 0,00 $ . Вы не можете сказать справедливее, чем который.

Текущая версия: 1.3 .

Просмотреть все значки (.png файл, 1Мб) Скачать

Лицензия

Я также люблю слышать, как мою работу используют, чувствую воодушевление отправить электронное письмо со ссылкой или скриншотом значков в их новом доме к mjames на gmail dot com. Эта работа находится под лицензией Creative Лицензия Commons Attribution 2.5. Это означает, что вы можете использовать его для любых целей и делать любые изменения вам нравятся. Все, что я прошу, это включить ссылку вернуться на эту страницу в ваших кредитах (хотя гигантская ссылка на каждой странице вашего сайта на самом деле не необходимо, свяжитесь со мной, чтобы обсудить детали).

Значки также можно использовать в Лицензия Commons Attribution 3.0 (Привет, ребята, Debian!) Со следующими требованиями:

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

Достопримечательности

Вы пользуетесь этим набором? Свяжитесь со мной!

Пожертвовать

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

Создание и импорт пользовательского набора значков

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

Если вы используете значки из разных наборов значков на одной странице, создание настраиваемый набор значков только с этими значками — отличный способ уменьшить загрузку страницы время.Таким образом, Beaver Builder загружает только один набор иконок.

1. Создайте собственный набор значков #

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

Чтобы создать собственный набор значков с помощью приложения IcoMoon #

1. Откройте приложение IcoMoon.

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

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

4. Измените название шрифта на то, что поможет вам запомнить набор в Beaver Builder.

   Этот шаг не является обязательным, но имя шрифта по умолчанию — icomoon , поэтому если вы импортируете более одного набора значков IcoMoon, Beaver Builder отобразит одинаковая этикетка icomoon для обоих.

5. Переименуйте префикс класса с icon- на любое другое.
   Важно: Обязательно укажите пользовательский префикс класса. Если оставить без изменений, несколько значков шрифтов с использованием префикса IcoMoon по умолчанию icon- могут конфликтовать, из-за чего некоторые из них отображаются неправильно или не отображаются в Beaver Builder селектор значков.

6. Откройте раздел CSS Selector и выберите Use attribute selectors или Use a class .
   Не выбирайте использование тега , потому что он может перекрыть все другие шрифты ‘ стилизация в Beaver Builder.

7. Щелкните X в правом верхнем углу, чтобы закрыть окно Preferences .

8. Нажмите Скачать .
   Загружаемый файл представляет собой zip-архив с префиксом icomoon .

9. Следуйте приведенным ниже инструкциям, чтобы импортировать набор значков в Beaver Builder.

Чтобы создать собственный набор значков с помощью Fontello #

1. Перейдите на сайт Fontello.

2. Выберите нужные значки в своем наборе, щелкнув по ним, или загрузите значки SVG, перетащив их внутрь. Дополнительную информацию см. В справке Fontello.

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

4. Нажмите Загрузить webfont в правом верхнем углу.
   Загружаемый файл представляет собой zip-архив с префиксом fontello .

5. Следуйте приведенным ниже инструкциям, чтобы импортировать набор значков в Beaver Builder.

2. Импортируйте настраиваемый набор значков в Beaver Builder #

1. На панели администратора WordPress нажмите «Настройки »> «Beaver Builder»> «Значки », затем нажмите Загрузить набор значков .

   No related posts.