html - 如何使用基础图标更改列表项样式？

Question

我已经下载了一组基础图标，但我很难找到有关如何在我的 CSS 代码中使用这些图标的文档。

我知道我可以在我的标记中使用它:

<i class="fi-check"></i>

但我想将它包含在我的 css 文件中

@import url("foundation-icons/foundation-icons.css");

并在这里开始使用它们。例如，我想将所有列表项样式更改为复选标记。基本上我想要的是:

.myClass li { list-style: fi-check; }

是否有可能以某种方式做到这一点？

Answer 1

正如您所指出的，在您的标记中使用它们是最简单的。

<i class="fi-check"></i>

但是，如果您想为自己的自定义样式重新创建它，则必须重新创建/更改 foundation-icons.css

中的 css 规则

首先你需要引入@font-face:

@font-face {
  font-family: "foundation-icons";
  src: url("foundation-icons.eot");
  src: url("foundation-icons.eot?#iefix") format("embedded-opentype"),
       url("foundation-icons.woff") format("woff"),
       url("foundation-icons.ttf") format("truetype"),
       url("foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

然后您需要像这样将它添加到您的自定义 CSS 中:

.myClass li:before {
  font-family: "foundation-icons";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  text-decoration: inherit;

  content: "\f126";
}

最后一行引用了 foundation-icons 文件中的 check 图标。因此，如果您想将图标更改为其他内容，您需要查看 foundation-icons.css 以查看将哪些代码放入 content 部分。

例如:

trash = content: "\f204";
stop = content: "\f1ef";

希望这是有道理的!