Как установить свойство содержимого CSS с помощью значка материала Google?

Как я могу вставить значок материала Google «значок шеврона справа» (https://design.google.com/icons/#ic_chevron_right) в следующем свойстве содержимого CSS:

.bullet li a:before {
    content: "";
}

material-design css google-material-icons contentproperty
person Max    schedule 22.10.2016    source источник

Ответы (6)


arrow_upward
45
arrow_downward

Обновление 2018 года

Google удалил коды, которые отображались ранее для IE9 и ниже. Чтобы получить коды, посетите файл кодовых точек в репозитории GitHub.

Ссылка на кодовые точки в репозитории GitHub: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

Шаг 1: Включите таблицу стилей значков материалов.

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

Шаг 2 :

CSS-код:

.bullet li a:before {
    font-family: "Material Icons";
    content: "\e5cc";
}

Объяснение: значение e5cc — это код, который вы видите для шеврона.

введите описание изображения здесь

person Sarvap Praharanayuthan    schedule 22.10.2016
comment
Для современных браузеров, поддерживающих функцию CSS font-feature-settings вы можете просто использовать имя значка вместо кодовой точки: .bullet li a:before { font-family: "Material Icons"; content: "chevron_right" } - person Joe; 25.06.2018
comment
хорошая вещь. спасибо! - person Bögözi; 26.06.2021

arrow_upward
11
arrow_downward 

::before {
    font-family: 'Material Icons';
    content: "\E87C";
}

::after {
    font-family: 'Material Icons';
    content: "face";
}

http://codepen.io/estelle/pen/MwvOjd

person Daniel Delgado    schedule 05.09.2018
comment
Не знал, что вы можете ссылаться на значок напрямую по имени в реквизите content — отличный совет! - person Pavel Ye; 14.06.2020

arrow_upward
5
arrow_downward

Попробуй это.

.bullet li a:before {
    font-family: FontAwesome;
    content: "\f054";
}

Вы можете ссылаться здесь, чтобы узнать значения содержания

person Bhavin Shah    schedule 22.10.2016
comment
не забудьте также установить семейство шрифтов: P - person Medda86; 22.10.2016
comment
хорошо ... вы включили необходимые CSS, шрифты и API для дизайна материалов Google? - person Bhavin Shah; 22.10.2016
comment
Я включил MDL - person Max; 22.10.2016

arrow_upward
2
arrow_downward

Вы можете использовать это для режима rtl:

.bullet li a:before {content: '\E5CB';}
person Imad Ghoummaid    schedule 17.07.2017

arrow_upward
1
arrow_downward

Если вы уже включили уменьшенный CSS-код с сайта materialdesignicons.com, просто используйте семейство шрифтов Material Design Icons:

::after {
    font-family: 'Material Design Icons';
    content: "\f054";
}

Также доступна удобная шпаргалка.

person andiF    schedule 17.07.2019

arrow_upward
0
arrow_downward

Обновление от июня 2021 г.

Кодовые обозначения значков материалов находятся на веб-странице Google Fonts в разделе значков материалов.

Шаг 1: Включите таблицу стилей значков материалов.

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

Шаг 2: CSS-код.

::after {
    font-family: 'Material Icons';
    content: "/e5cc";
}

Объяснение. Значение e5cc — это код, который вы видите для шеврона в следующей ссылке и на следующем изображении.

https://fonts.google.com/icons?selected=Material+Icons&icon.query=chevron

Как получить код содержимого значка шеврона

person Juan Pablo Risso    schedule 29.06.2021