Как вставить значок в CSS?

Question

Я пытался вставить значок в CSS с кодом ниже:

content: "\f103";

Но это не работает.

Если я добавлю следующую строку, она не будет работать:

font-family: FontAwesome;

Я хотел бы сделать, как в следующем примере, добавитьТовар в корзину и перейти к заказу:

https://demo.commercekickstart.com

Answer 1

Вот что происходит:

Вы пытаетесь вставить символ Unicode U + F103 на свою страницу.Этот символ является частью подмножества Юникод области личного пользования.Это диапазон символов, который Unicode обещал не сопоставлять никаким символам, чтобы шрифты значков и приложения могли использовать эти значения.

Большинство значков, которые вы видите, будут иметь значение Unicode, например content: "\f103"; ишрифт значка, например FontAwesome.

Если вы хотите включить шрифт значка, вам также необходимо импортировать шрифт на свой веб-сайт.В случае FontAwesome вы можете следовать их « Как использовать », добавив <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> к заголовку ваших HTML-документов.

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

Если вы копируете их HTML, поместите его на свою страницу как <i class="fas fa-info-circle"></i>..fas устанавливает семейство шрифтов для вас, а .fa-info-circle устанавливает соответствующий символ Unicode.

Answer 2

Вы должны использовать fontAwesome в вашем CSS-файле и добавить это:

font-family: FontAwesome;