【问题标题】：How do I set up the Zurb Foundation icons?如何设置 Zurb Foundation 图标？
【发布时间】：2016-03-25 05:05:14
【问题描述】：
我已经下载了 Zurb Foundation 图标字体文件http://zurb.com/playground/foundation-icon-fonts-3
我将它们解压缩并将 /foundation-icons 文件夹放入我的 /css 文件夹中。这个对吗？我正在尝试遵循文档“如何使用它们”部分，但我不知道如何开始使用这些类。
我在我的 .html 中这样做是为了调用这些类。
<a class=".fi-social-facebook">Facebook</a>
所以我假设我必须没有正确配置/设置我的文件字体。
更新：这就是我的目录的样子...我正在引用它
这就是我给班级打电话的方式。
<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>
【问题讨论】：
标签：
css
icons
zurb-foundation
css-frameworks
【解决方案1】：
基础图标使用<i> 标签。所以你会有类似<i class="fi-social-facebook"></i><a href="http://facebook.com">Facebook</a>的东西。
在您下载的 zip 中，有一个 preview.html 文件。在您的编辑器中打开它并查看它。这会更有意义。
此外，他们的 CSS 文件不包括尺寸。因此，当您使用他们的示例更改大小时（例如<i class="fi-calendar size-24"></i>），什么都不会改变。在查看他们的 preview.html 文件时，他们在标题中定义了这些大小。所以我将它们复制出来并将它们放入我的 CSS 并解决了这个问题。如果你想使用它们，它们在这里：
.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }
【解决方案2】：
下载包后，您必须添加到您的<head>：
<link rel="stylesheet" href="css/foundation-icons.css" />
并确保您的css 文件夹中的svgs 文件夹以及您的css 文件夹中的其余文件也是。
当你完成这个设置后，在你的 html 上试试这个：
<i class="fi-star"></i>
它应该打印一个星号。
最快的解决方案，无需安装：
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
https://cdnjs.com/libraries/foundicons提供其他版本
【解决方案3】：
我通过pip install django-zurb-foundation 安装并遇到了同样的问题…/foundation/icons 工作，但我无法在我的实际项目中引用它们。最后为我工作的是将以下内容添加到我的项目的base.html
{% load foundation_tags %}
{% block css %}
{% foundation_css 'foundation-icons' %}
{% endblock css %}
这实际上与ManelMusti 的答案相同，但在模板中使用与…/site_packages/foundation/templates/foundation/icons.html 中的示例相同的技术进行处理
【解决方案4】：
正确的方式是<i class="fi-star"></i>而不是<i class="ft-star"></i>