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";
}

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

例如：

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

希望这是有道理的！

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

1 个答案: