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

【问题标题】：How do I change my list item style with a foundation icon?如何使用基础图标更改列表项样式？
【发布时间】：2015-03-18 13:42:44
【问题描述】：

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

我知道我可以在我的标记中这样使用它：

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

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

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

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

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

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

【问题讨论】：

标签： html css zurb-foundation

【解决方案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";

希望这是有道理的！

【讨论】：