Использование контента для представления значков с использованием псевдоэлементов CSS

Question

Использование контента для представления значков с использованием псевдоэлементов CSS

0

Я просто наткнулся на следующую CodePen: http://codepen.io/html5web/pen/enlAc. В конце источника вы найдете следующие строки кода:

.twitter:before {
  content:"\F021";
}
.in:before {
  content:"\F022";
}
.vimeo:before{
  content:"\F024"; 
}

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

System.Data 03 окт. 2013, в 23:10

Источник

1

w3.org/TR/css-syntax-3/#escaping
CBroe 03 окт. 2013, в 20:58

Теги:

html

css

2 ответа

0

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

BetaBlaze 03 окт. 2013, в 18:39

Ещё вопросы

Ennui · Accepted Answer · 2013-10-03T18-47-00.000Z

Это значение шестнадцатеричного значения CSS для определенного символа. Это не создает значок - они используют шрифт значка, который присваивает различные значки определенным знакам символа decimal/ascii. Просто Google "иконки шрифтов", и вы найдете много информации об этом.

Справка:

http://css-tricks.com/css-content/
http://css-tricks.com/snippets/html/glyphs/
http://www.evotech.net/articles/testjsentities.html (преобразует ASCII в значение Hex CSS)

Кроме того :before и :after - псевдоэлементы, а не псевдоклассы.