我试图在zurb foundation icon pack上使用字体图标，当然你可以通过内容显示它们内联，这很简单;
<i class="fi-alert"></i>
除非我尝试将其用作css内容（这是他们展示它们的方式......）当我在css类中执行content: "\f101"之类的操作时，我不会得到相同的结果。我只是要显示那些方块。
我在外部包含它们的唯一区别是什么？经由;
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">
或者是什么？我只是错过了我的sass中的src ref或类似的东西吗？我这样做是因为我希望它能够如何工作并且过去曾与其他人一起工作但是我没有从css中使用它们的图标，只显示内联的html？我知道这会是一种愚蠢的疏忽，所以可以用另一双眼睛。
对不起，从我的网络体验中解脱出来，已经有一段时间了。
答案 0 :(得分：3)
您需要在设置font-family的同一个班级中将content设置为图标字体。
.icon:after{
font-family: "foundation-icons";
content: "\f101";
}
答案 1 :(得分：0)
要在css选择器中使用它们，您必须为您的页面实际安装font-family，并在使用代码之前在css选择器中声明该font-family。
这是一本不错的教程https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
答案 2 :(得分：0)
请提供一个有效且无效的代码示例。
如果您尝试通过将内容添加到不属于图标包的现有css元素来显示图标，则无法使用。例如，这将不起作用：
HTML: <li class="icon">text </li>
CSS: .icon:before { content: "\f101"; }}
使用'i'标签添加图标：
HTML: <li class="icon"><i class="fi-alert"></i>text </li>
每次看到正方形时，都需要检查字体文件是否已加载。如果您要在服务器上加载css并手动链接它们，则图标集会使用4种字体：