0

感谢 Alex Raven在https://codepen.io/asraven/full/qbrgje中自动生成的可折叠目录树 ( ACDT ) 。

如果节点是父节点，我想在树中的节点（文本）之前放置树符号，如果节点没有子节点，我想将树符号放在树中。

我加载了 FontAwesome 文件（Font Awesome 5 Free）来实现这一点，我只编辑了 ACDT的 css 的最后一部分。

编辑部分是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">&#xf06c;</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;  
}
4

0 回答 0