Как сделать иконку в css

Обновлено: 07.07.2024

По ссылке ниже вы найдёте список иконок по умолчанию:

Webix предоставляет два набора иконок по умолчанию в зависимости от используемой темы:

1. Иконки Webix Awesome для Flat, Compact и Contrast тем - на базе коллекции Font Awesome 5.

2. Иконки Webix Material для Material и Mini тем - на базе коолекции Material Design.

Использовать иконки по умолчанию можно следующими способами:

• через конфиг компонента: icon:"wxi-name"

Произвольные иконки

Вы также можете использовать набор произвольных иконок в вашем Webix приложении. Для этого вам необходимо:

1. подключить желаемый набор на страницу;

2. указать полное имя иконки, которую вы хотите использовать:

Например, вы можете использовать:

Иконка-компонент

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

Значение свойства icon - это название желаемой иконки.

Кнопка с иконкой

Типы иконок

type:"icon"
type:"iconTop"

• type - свойство, которое превращает стандартную кнопку в кнопку-иконку:
  • icon - иконка без определённой рамки;
  • iconTop - большая иконка без рамки с текстовым ярлыком снизу;
  • iconButton - маленькая иконка с текстовым ярлыком справа;
  • iconButtonTop - большая иконка с текстовым ярлыком снизу;

  CSS класс 'webix_icon'

  Такой вариант инициализации иконок подходит для виджетов и элементов, у которых вместо кнопок другие контролы: вкладки (кнопки сами по себе), панели, элементы списка и dataview, ячейки datatable. В этом случае кнопки выполняют декорирующую роль.

  Возможные CSS классы:

  • 'webix_icon wxi-name' - стандартная иконка (белая или чёрная в зависимости от текущей темы);
  • 'webix_input_icon wxi-name' - светло-серая иконка для использования с полями ввода.

  Для произвольных иконок используйте 'webix_icon full icon name' и 'webix_input_icon full icon name' соответственно.

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

  С помощью CSS свойства

  В кладки Multiview

  С помощью HTML

  Вы также можете добавить HTML элемент с классом 'icon' текстовому значению любого элемента виджета:

  Панель AccordionItem с иконкой

  Элемент списка с иконкой

  Здесь имя иконки находится между хэш символами, т.к. приходит с данными. Например, с JSON это выглядит следующим образом:

  Как менять иконки по умолчанию

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

  Как указать иконку Material Design

  Если вы хотите указать отличную от исходной иконку, передайте её имя в качестве значения свойству icon:

  В результате иконки RichSelect по умолчанию ("wxi-menu-down") будет заменена на иконку "mdi mdi-arrow-down" из коллекции Material Design.

  Как указать произвольную иконку

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

  И RichSelect, и Combo использует иконку "wxi-menu-down" icon, CSS стили которой нужно изменить:

  В результате иконка "wxi-angle-down" будет заменена на "search.jpg".

  Если вам необходимо стилизовать один комбобокс, а другой оставить без изменений, опишите отдельный css класс для той, которую хотите изменить:

  Соответствующий CSS выглядит таким образом:

  Стилизация виджетов подробно описана в соответствующей статье.

  В данном уроке мы создадим иконку документа с использованием свойств CSS3. Для нее потребуется только один элемент HTML.

  
  
  

  План действий

  1. Создаем прямоугольник.
  2. Округляем углы.
  3. Используем псевдо-элемент для создания загнутого уголка.
  4. Создаем иллюзию текста с помощью полосок градиента.

  Шаг 1. Создаем прямоугольник

  Начнем с добавления единственного элемента HTML: тега ссылки. Большинство иконок работают как ссылки.

  В нашем примере иконка будет иметь размер 40x56px. В реальном проекте его можно уменьшить. Также нужно использовать свойство display: block , потому что тег ссылки является строчным элементом по умолчанию.

  Обратите внимание, что мы установили позиционирование содержания, чтобы упростить работу с псевдо-элементами.

  Далее, добавим прелести с помощью теней CSS. Чтобы скрыть текст мы используем свойство text-indent .

  Вот что у нас получилось:

  
  

  Шаг 2. Скругленные углы.

  Теперь округляем углы:

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

  
  

  Шаг 3. Загибаем один уголок.

  Для создания иллюзии загнутого уголка мы будем использовать псевдо-элемент.

  Сначала добавим к нашей иконке :before . В нашем случае никакого текста не требуется. Но нужно создать квадрат с размером стороны 15px и использовать для него градиент в качестве фона.

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

  
  

  Шаг 4. Добавляем строчки текста.

  Теперь будем использовать псевдо-элемент :after , чтобы добавить несколько штрихов, представляющих текст на странице. Устанавливаем ширину 60% и значения свойств margin-left и margin-right 20% (что дает в итоге 100%). Затем задаем высоту и позиционирование как 0 и 0 .

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

  
  

  Готово!

  5 последних уроков рубрики "CSS"

  Забавные эффекты для букв

  Небольшой эффект с интерактивной анимацией букв.

  Реализация забавных подсказок

  Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

  Анимированные буквы

  Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

  Солнцезащитные очки от первого лица

  Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

  Сегодня я хотел бы показать вам аккуратный трюк. Мы создадим иконку документа с чистым CSS3. Более того, для этого эффекта потребуется только один элемент HTML.

  План игры

  1. Создать квадратную коробку
  2. Закруглить края
  3. Используйте псевдоэлементы для создания закрученного угла
  4. Создайте иллюзию текста с полосатым градиентом

  Шаг 1: Создать коробку

  Мы начнем с добавления нашего единственного HTML-элемента: тега привязки. Это имеет смысл, поскольку большинство значков также служат ссылками.

  Давайте установим несколько произвольных размеров для нашей иконки. Мы сделаем 40x56px — просто для этой демонстрации. В реальном приложении вы, вероятно, захотите уменьшить это! Кроме того, имейте в виду, что нам нужно добавить display: block , так как все теги привязки встроены по умолчанию.

  Кнопки социальных сетей для сайта сделанные на чистом CSS с применением иконок Font Awesome. Посмотрите на моё решение - возможно это именно то что вы ищите.

  
  

  Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.

  Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.

  Кнопки социальных сетей

  Набор круглых кнопок

  Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:

  Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.

  Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.

  Начинается он с

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

  Надеюсь с вставкой HTML-кода кнопок разберётесь.

  Ссылка на соц сеть

  Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.

  Код CSS

  Первой строкой в данном css идёт подключение иконочного шрифта FontAwesome 4.7.0 через @import . Если FontAwesome уже подключен к вашему сайту, то удалите данную строку.

  CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.

  Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.

  Например:

  Набор квадратных кнопок

  Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:

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

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

  
  

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

  Шаг 1. HTML

  Разметка простая, у нас будет два основных ID, первый из которых будет основной контейнер, а второй это заливка, затем мы по очередности подключаем слои иконок:

  Читайте также:

    
  • Как сделать отлив на фронтоне бани
    
  • Как сделать койл синим
    
  • Как сделать фаталити в мортал комбат
    
  • Как сделать плагин для cs go
    
  • Как сделать уксусную заправку