Иконки css: Иконки Css — скачивайте бесплатно в PNG и SVG

Leave a Comment / Css / By /

ключ icons — Mozilla | MDN

ТипObject
ОбязательныйНет
Пример
"icons": {
  "48": "icon.png",
  "96": "[email protected]"
}

Ключ icons определяет, какие иконки (значки) будет использовать ваше дополнение. Эти иконки будут использоваться при показе вашего дополнения в менеджерах компонентов, таких как Менеджер Дополнений.

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

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

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

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

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

Ключи в объекте icons определяют размеры иконок в пикселях, значения — относительный путь к файлам с изображениями. Этот пример содержит иконку размером 48х48 пикселей и увеличенную версию для мониторов высокого разрешения.

"icons": {
  "48": "icon.png",
  "96": "[email protected]"
}

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

  1. В файле изображения должен быть определён viewBox. Например:
    <svg viewBox="0 0 48 48" ...
  2. Даже в том случае, если используется всего один файл, нужно определить его для разных размеров иконки в манифесте. Например:
    "icons": {
  "48": "icon.svg",
  "96": "icon.svg"
}

Примечание: Если вы используете программу Inkscape или подобную ей для создания SVG, сохраняйте изображение как «Простой SVG». Иначе Firefox может запутаться во множестве специальных пространств имён и не отобразить картинку.

BCD tables only load in the browser

with JavaScript enabled. Enable JavaScript to view data.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved? Learn

how to contribute.

This page was last modified on by MDN contributors.

W3.CSS Иконки

❮ Предыдущая Следующая Глава ❯

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

С W3.CSS вы можете использовать любую библиотеку значков, как:

  • Шрифт Высокий Иконки
  • Google Материал Иконки
  • Bootstrap Иконки

Использование иконок

Чтобы использовать значок, просто добавьте имя значка к классу с HTML <I> элемента.

Для того, чтобы контролировать размер значка, изменить свойство размера шрифта значка, или использовать классы w3- размер:

  • W3-крошечное
  • W3-маленький
  • W3-большой
  • W3-XXLarge
  • W3-XXXLarge

Шрифт Высокий Иконки


фа фа-домой


Ф.А. к.-а.-бары


фа фа-стрелка-влево


фа фа-стрелка-вправо


фа фа-поиска


фа фа-близко


фа фа-обновления


фа фа-трэш


фа фа-самец


фа фа-автомобиль


фа фа-грузовик


фа фа-плоскости

пример

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<link rel=»stylesheet» href=»http://www.w3ii.com/lib/w3.css»>

<link rel=»stylesheet» href=»http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4. 4.0/css/font-awesome.min.css»>
<body>

<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i style=»font-size:64px»></i>

</body>
</html>

Попробуй сам «

Для получения полного списка иконок: Посетите нашу ссылку значок

Google Материал Дизайн Иконки

Главная
Главная

меню
меню

arrow_back
arrow_back

arrow_forward
arrow_forward

поиск
поиск

Закрыть
Закрыть

обновление
обновление

Удалить
Удалить

человек
человек

directions_car
directions_car

local_shipping
local_shipping

local_airport
local_airport

пример

<!DOCTYPE html>
<html>
<title>W3. CSS</title>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<link rel=»stylesheet» href=»http://www.w3ii.com/lib/w3.css»>

<link rel=»stylesheet» href=»https://fonts.googleapis.com/icon?family=Material+Icons»>
<body>

<i>cloud</i>
<i>cloud</i>
<i >cloud</i>
<i>cloud</i>
<i>cloud</i>
<i >cloud</i>

</body>
</html>

Попробуй сам «

Bootstrap Иконки


Главная


меню гамбургер


arrow_back


arrow_forward



поиск


Удалить


обновление


мусор



пользователь


файл


Распечатать


самолет

пример

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<link rel=»stylesheet» href=»http://www. w3ii.com/lib/w3.css»>
<link rel=»stylesheet» href=»http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css»>
<body>

<i></i>
<i></i>
<i></i>

<i></i>
<i></i>
<i style=»font-size:64px»></i>

</body>
</html>

Попробуй сам «

❮ Предыдущая Следующая Глава ❯

значков CSS — GeeksforGeeks

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

Доступны 3 типа библиотек значков, а именно

  • Font Awesome Icons
  • Google Icons
  • Bootstrap Icons

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

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

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

Примечание: Все вышеупомянутые библиотеки не требуют загрузки или установки.

Способ 1: значки Font Awesome

Чтобы использовать значки Font Awesome, добавьте следующую ссылку в раздел.

 <ссылка rel="таблица стилей"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Синтаксис:

Мы можем использовать свойство font-size , чтобы сделать его значками большого размера для отображения. В приведенном ниже примере показано использование свойства font-size .

Пример 1: В этом примере мы использовали свойство font-size с каждым классом значков, значение которого установлено на 32px.

HTML

< html >

< head >

     < link rel = "StyleSheet"

HREF =

"https://cdnjs.cloudflare.com/ajax/libs/FONTY-ALESSOMESOMASOMES/. .мин.css" >

head >

 

< body >

     < h2 >GeeksforGeeks h2 >

< I Класс = "FA FA-Cloud" Стиль = "Font-Size: 32PX;" > I >

< I Класс = "FA-Heart" СИЛЕТ "" "" " " > I >

< I Класс = "FA-FIL " > I >

< I Класс = "FA-CAR" СИЛЕТ " " "" "; " > I >

< I Класс = "FA-Bars" СИЛЕЙ "" " " "" " > i >

body >

html >

Output:

Пример 2: В этом примере мы использовали класс « fa fa-heart », имеющий свойство font-size и свойство цвета, значения которых установлены на 28 пикселей и красный, синий соответственно.

HTML

< html >

< head >

     < link rel = "таблица стилей" href =

"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >

head >

 

< body >

     < h2 >GeeksforGeeks h2 >

     < i класс = "fa fa-heart" стиль = = ; > I >

< I Класс = "FA-Heart" Стиль = 9006 "; > I >

< I Класс = "FA-Heart" СИЛЕТ "" "" " красный цвет;" > I >

< I Класс = "FA-Heart" стиль = 9006 " = 9006" "; > i >

     < i class = "fa fa-heart" style = "font-size:36px; красный цвет;" > i >

body >

html >

Output:

Method 2: Google Icons

Чтобы использовать Google Icons, добавьте следующую ссылку в раздел.

Синтаксис: 

 cloud

См. Как использовать значок материала Google в качестве стиля списка на веб-странице с использованием HTML и CSS? статью, чтобы узнать, как использовать свойства CSS с предопределенным классом.

Пример 1: В этом примере мы использовали класс « material-icons » с необходимой иконкой.

HTML

< html >

< head >

     < link rel = "stylesheet" href =

"https : //fonts. googleapis.com/icon? Семейство = материал+иконы » >

Голова >

< 9008

<

    .0067>

    < H2 > Geekforgeeks H2 >

    <

    . Cloud I >

    < I Класс = "Материал" > FOODAIN0067 i >

         < i class = "material-icons" >attachment i >

         < i Класс = "Материал-Иконы" > Компьютер I >

    < I Class < I Class < I Class < I . 0067 = "material-icons" >traffic i >

    body >

    html >

Вывод:

Пример 2: В этом примере мы использовали класс « material-icons » с формой облака.

HTML

< html >

< head >

     <

link rel = "stylesheet" href =

"https://fonts. googleapis.com/icon?family=Material+Icons" >

голова 9006 0068

 

< body >

     < h2 >GeekforGeeks h2 >

     < i class = "значки материалов" стиль = "размер шрифта: 30px;" >облако

i >

     < i класс = "значки материалов" стиль = "размер шрифта: 40px;" > Облако I >

< I Класс = "Материал" 9007 " = " Материал " 9007" = ". " >облако i >

     < i класс = "значки материалов" стиль

= "размер шрифта: 60px;" >cloud i >

     < i class = "material-icons" style = "font-size:70px; " >облако i >

Body >

HTML >

Outluge: 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000 9000

  • внутри раздела.

     <ссылка rel="таблица стилей"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    Синтаксис:

    Мы можем использовать свойство font-size , чтобы отображать значки большого размера. В приведенном ниже примере показано использование свойства font-size с предопределенным классом.

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

    HTML

    < html >

    < head >

         < link rel = "stylesheet" href =

    "https ://maxcdn. bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

    head >

     

    < body >

         < h2 >GeekforGeeks h2 >

         < i class = "glyphicon glyphicon-cloud " стиль = "Размер шрифта: 28px;" > i >

         < i класс = "глификон глификон-пользователь" стиль = "размер шрифта: 30 пикселей;" > I >

    < I Класс = "Glyphicon Glyphicon-thumbs-ratb-ul" "Glyphicon glyphicon-thumbs-ratb-ul" "Glyphicon glyphicon-thumbsp 32 пикселя;" > i >

         < i класс = "глификон глификон-удалить" стиль = "размер шрифта: 34px;" > i >

         < i class = "glyphicon glyphicon-envelope" style = "font-size:36px; " > i >

    Body >

    HTML >

    . thumbs-up ”класс с поднятой вверх большой палец и все значения установлены на разные числа.

    HTML

    < html >

    < head >

         < link rel = "stylesheet" href =

    "https: //maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

    head >

     

    < body >

         < h2 >GeekforGeeks h2 >

         < i class = "glyphicon glyphicon-thumbs-up " стиль = "Размер шрифта: 20px;" > i >

         < i класс = "глификон глификон-большой палец вверх" стиль = "размер шрифта: 30 пикселей;" > I >

    < I Класс = "Glyphicon Glyphicon-thumbs-ratb-ul" "Glyphicon glyphicon-thumbs-ratb-ul" "Glyphicon glyphicon-thumbsp 40 пикселей;" > i >

         < i класс = "глификон глификон-большой палец вверх" стиль = "размер шрифта: 50 пикселей;" > I >

    < I Класс = "Glyphicon Glyphicon-thumbs-ratb-ul" "Glyphicon glyphicon-thumbs-ratb-ul" "Glyphicon glyphicon-thumbsp 60 пикселей;" > i >

    Body >

    HTML >

    .

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *