Fontawesome символ листа не работает, в то время как символ точки работает в:: до использования содержимого в CSS
Авторы благодарят Алекса Равена за его автоматически сгенерированное складное дерево каталогов (ACDT) по http://https//:codepen.io/asraven/pen/qbrgje.
Я хочу поместить символ дерева перед узлом (текстом) в дереве, если узел является родительским, и листовым символом, если у узла нет дочернего элемента.
Я загрузил файлы FontAwesome (Font Awesome 5 Free), чтобы добиться этого, и я отредактировал только последнюю часть CSS ACDT.
Отредактированная часть - часть комментария ниже "Иконы" в css.
Я не мог сделать иконку листа видимой для листовых узлов.
\f06c представляет значок листа.
Странно, что я вижу символ точки круга, если пишу content: "\f192"; под ul.directory-list li::before; Однако, если я напишу content: "\f06c"; в том же месте это не работает.
Мой браузер IE11, я должен использовать только этот браузер.
В худшем случае я могу решить свою проблему на стороне PHP, однако я хочу понять "почему" и решить с помощью CSS, если это возможно. В чем причина и как я могу решить эту проблему? Вы можете мне помочь. Благодарю.
моя единственная отредактированная часть CSS, HTML и полная CSS приведены ниже:
Только отредактированная часть CSS
/* Only edited part */
ul.directory-list li::before {
font-family: "Font Awesome 5 Free";
font-style: normal;
content: "\f06c"; /* \f192 is working, \f06c not working*/
margin-right: 10px;
}
ul.directory-list li.folder::before {
/* folder icon if folder class is specified */
font-family: "Font Awesome 5 Free";
font-style: normal;
content: "\f1bb"; /* \f1bb is working, \f06c also works*/
margin-right: 10px;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css"/>
<link rel="stylesheet" type="text/css" href="css/custom.css"/>
<title>App</title>
</head>
<body>
<h2>Collapsible Directory List</h2>
<div class="box">
<ul class="directory-list">
<li>assets
<ul>
<li>css
<ul>
<li>typography.css</li>
<li>layout.css</li>
<li>modules.css</li>
<li>states.css</li>
<li>theme.css</li>
</ul>
</li>
<li>js
<ul>
<li>custom.js</li>
<li>jquery.js</li>
</ul>
</li>
<li>images
<ul>
<li>logo.svg</li>
<li>arrow-sprite.svg</li>
<li>social-sprite.svg</li>
</ul>
</li>
<li>functions.php</li>
</ul>
</li>
<li>templates
<ul>
<li>pages
<ul>
<li>about.tpl</li>
<li>pricing.tpl</li>
<li>contact.tpl</li>
<li>home.tpl</li>
<li>features.tpl</li>
</ul>
</li>
<li>header.tpl</li>
<li>menu.tpl</li>
<li>footer.tpl</li>
</ul>
</li>
<li>index.php</li>
<li>style.css</li>
</ul>
</div>
<i class="fa fa-leaf"></i>
<i class="fa"></i>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/folder_tree.js"></script>
</body>
</html>
Пользовательские CSS
/* Demo page styles
-------------------------------------------------------------- */
body {
background: #eee;
font-family: "times new roman", serif;
line-height: 30px;
}
h2 {
color: #aaa;
font-size: 30px;
line-height: 40px;
font-style: italic;
font-weight: 200;
margin: 40px;
text-align: center;
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.7);
}
.box {
background: #fff;
border-radius: 2px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
margin: 30px 5%;
padding: 5%;
}
@media (min-width: 544px) {
.box {
margin: 40px auto;
max-width: 440px;
padding: 40px;
}
}
/* The list style
-------------------------------------------------------------- */
.directory-list ul {
margin-left: 10px;
padding-left: 20px;
border-left: 1px dashed #ddd;
}
.directory-list li {
list-style: none;
color: #888;
font-size: 17px;
font-style: italic;
font-weight: normal;
}
.directory-list a {
border-bottom: 1px solid transparent;
color: #888;
text-decoration: none;
transition: all 0.2s ease;
}
.directory-list a:hover {
border-color: #eee;
color: #000;
}
.directory-list .folder,
.directory-list .folder > a {
color: #777;
font-weight: bold;
}
/* The icons
-------------------------------------------------------------- */
/* Only edited part */
ul.directory-list li::before {
font-family: "Font Awesome 5 Free";
font-style: normal;
content: "\f06c"; /* \f192 is working, \f06c not working*/
margin-right: 10px;
}
ul.directory-list li.folder::before {
/* folder icon if folder class is specified */
font-family: "Font Awesome 5 Free";
font-style: normal;
content: "\f1bb"; /* \f1bb is working, \f06c also works*/
margin-right: 10px;
}