Матвей Земсков

Заметки веб-мастера

Суббота, 23 мая 2020 14:38

Галерея CSS иконок для frontend-разработчика

Оцените материал
(0 голосов)

Дизайнер Вентинг Чжан из Adode создал интересное веб-приложение для генерации простых CSS-иконок. У него простое название “CSS Icon” и, возможно, это одно из самых крутых генераторов иконок для фронтенд-разработчиков.

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

CSS Icon

Эти иконки не имеют CSS-зависимостей и не требуют каких-то специальных функций браузера. На первый взгляд может показаться, что иконки созданы на SVG, но на самом деле это просто div’ы.

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

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

Копирование css кода из CSS Icon

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

Кстати этот значок для копирования также построен с использованием чистого CSS-кода Вентинга.

Чтобы изменить цвет любой иконки, найдите в ее основном классе свойство color. Обновление значения этого свойства также изменит цвет у всех остальных иконок.

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

Посетите домашнюю страницу CSS Icon, чтобы увидеть больше примеров и скопировать или отредактировать код источника.

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

Оригинал статьи: This Gallery of Pure CSS Icons is What All Frontend Developers Want

Перевод: Земсков Матвей

Прочитано 369 раз

Добавить комментарий


Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх