1

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

<p class="sample_class"></p>

Но когда дело доходит до добавления значков на страницы HTML, например, следующий пример кода для добавления значков Font Awesome (с сайта W3CSchools.com):

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>

</body>
</html>

На самом деле в окне браузера отображаются значки / символы шрифтов. Зачем? Разве не каждый элемент <i> </i> пуст?

|источник

1 ответ1

3

Содержимое, которое вы видите, взято из CSS. CSS также может добавлять содержимое, используя указатели :before и :after . Если вы посмотрите на font-awesome.min.css , вы найдете следующие строки, хотя и не в этом порядке:

.fa-cloud:before {
    content:"\f0c2"
}
.fa-heart:before {
    content:"\f004"
}
.fa-automobile:before,.fa-car:before {
    content:"\f1b9"
}
.fa-file:before {
    content:"\f15b"
}
.fa-navicon:before,.fa-reorder:before,.fa-bars:before {
    content:"\f0c9"
}
|источник

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .