свойство содержимого в CSS

Question

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

div:after{ 
    content:"\f107"; 
} 

этот код отображения стрелки, как это:

, что этот код? где я могу найти больше кода?

Answer 1

Использование content свойства встраивает виртуальное содержимое внутри элемента, он используется с псевдо :before или :after, так что если вы используете :before, содержание будет встраиваться прежде.

От MDN:

Свойство content CSS используется с ::before и ::after псевдо-элементов для генерации содержимого в элементе. Объекты, вставленные с использованием content, являются: anonymousreplaced elements.

Содержание свойство может содержать любой character, number, entities. Для получения дополнительной информации вы можете обратиться к статье here.

Кроме того, вы можете получить удобный конвертер here.

---

Этот метод также используется font-awesome - Example и другие вложения, связанные SVG шрифтов библиотеки, где вы можете просто позвонить классы элементов и шрифты будут встроены практически.

---

Кроме того, просто дополнительная информация, содержание генерируется с помощью CSS content свойства является inline по умолчанию, также это оказывается inside элемент, а не снаружи ..

Answer 2

Это escaped unicode character.

Answer 3

CSS Содержание Свойство: Свойства Содержания используется с: before и: после псевдоэлементов, для вставки сгенерированного содержимого.

Read more

Answer 4

Как пояснили другие ответы, правило CSS использует content свойство, чтобы вставить символ по его номеру Unicode.

Однако используется символ U + F107 ЧАСТНЫЙ ИСПОЛЬЗОВАНИЕ CHARACTER-F107. Это означает, что он не имеет смысла, кроме как по частным соглашениям, и не должен использоваться в обмене информацией. К сожалению, некоторые «потрясающие» трюки используют персональные коды для ввода графических символов. Это означает, что если используется не очень специфический шрифт с некоторыми символами, назначенными этим кодовым точкам, появляется общий символ неизвестного символа.

Так что гораздо безопаснее использовать изображение вместо этого в собственном содержании.

Answer 5

У CSS есть свойство content. Его можно использовать только с псевдоэлементами :after и :before. Он написан как псевдоселектор (с двоеточием), но он называется псевдоэлементом, потому что он фактически не выбирает ничего, что существует на странице, но добавляет что-то новое на страницу.

Шрифт Awesome - это веб-шрифт, содержащий все значки из структуры Bootstrap Twitter, и теперь еще много.

Вы можете найти список FontAwesome здесь: A list of Font Awesome icons and their CSS content values

Вы также можете пройти по этой ссылке, FontAwesome Examples, где вы можете увидеть различные иконки и как применить различные размеры на нем.