Question

我已下载Zurb Foundation图标字体文件http://zurb.com/playground/foundation-icon-fonts-3

我解压缩它们并将/ foundation-icons文件夹放入我的/ css文件夹中。它是否正确？我正在尝试遵循文档＆＃34;如何使用它们＆＃34;部分，我无法弄清楚如何开始使用这些类。

我在我的.html中这样做来调用这些类。

<a class=".fi-social-facebook">Facebook</a>

所以我假设我必须没有正确配置/设置我的文件字体。

更新：这就是我的目录看起来......我正在引用它这就是我打电话给班级的方式。

<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>

Snapshot

Answer 1

基础图标使用标记。所以你会有类似<a href="http://facebook.com">Facebook</a>的东西。

在您下载的zip中，有一个preview.html文件。在编辑器中打开它并查看它。它会更有意义。

此外，他们的CSS文件不包含尺寸。因此，当您使用他们的示例来更改大小（例如）时，什么都不会改变。在查看他们的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; }

Answer 2

下载完背包后，您必须添加到<head>：

 <link rel="stylesheet" href="css/foundation-icons.css" />

确保svgs文件夹中的css文件夹以及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

提供的其他版本

Answer 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

中的示例相同的技术在模板中处理

Answer 4

正确的方法是，而不是

如何设置Zurb Foundation图标？

4 个答案: