CSS 如何设置 Zurb Foundation 图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21384506/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I set up the Zurb Foundation icons?
提问by Beast_Code
I have downloaded the Zurb Foundation icon fonts files http://zurb.com/playground/foundation-icon-fonts-3
我已经下载了 Zurb Foundation 图标字体文件http://zurb.com/playground/foundation-icon-fonts-3
I unzipped them and placed the /foundation-icons folder into my /css folder. Is this correct? I am trying to follow the documentation "How to use them" section and i can't figure out how to start using the classes.
我解压缩它们并将 /foundation-icons 文件夹放入我的 /css 文件夹中。这样对吗？我正在尝试遵循文档“如何使用它们”部分，但我不知道如何开始使用这些类。
I am doing this in my .html to call the classes.
我在我的 .html 中这样做来调用类。
<a class=".fi-social-facebook">Facebook</a>
so i assume i must of not configured/set up my file font properly.
所以我假设我一定没有正确配置/设置我的文件字体。
Update: This is what my directory looks like... i am referencing it
and this is how I am calling the class.
更新：这就是我的目录的样子...我正在引用它
，这就是我调用类的方式。
<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>
采纳答案by Todd
Foundation icons use the <i>tags. So you would have something like <i class="fi-social-facebook"></i><a href="http://facebook.com">Facebook</a>.
基础图标使用<i>标签。所以你会有类似的东西<i class="fi-social-facebook"></i><a href="http://facebook.com">Facebook</a>。
In the zip that you downloaded, there is a preview.html file. Open it in your editor and look it over. It will make a little more sense.
在您下载的 zip 中，有一个 preview.html 文件。在您的编辑器中打开它并查看它。它会更有意义一点。
Also, their CSS file doesn't include sizes. So when you use their examples to change the size (ex. <i class="fi-calendar size-24"></i>), nothing will change. In looking at their preview.html file, they had those sizes defined in the header. So I copied them out and put them in my CSS and solved the issue. Here they are if you want to use them:
此外，他们的 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; }
回答by ManelPNavarro
Once you've downloaded the pack, you have to add to your <head>:
下载包后，您必须添加到您的<head>：
<link rel="stylesheet" href="css/foundation-icons.css" />
And be sure that the svgsfolder inside your cssfolder, and the rest of files inside your cssfolder too.
并确保svgs文件夹中的css文件夹以及文件夹中的其余css文件也是如此。
When you finish this set up, try this on your html:
当你完成这个设置后，在你的 html 上试试这个：
<i class="fi-star"></i>
It should print a star.
它应该打印一个星星。
Quickest solution, no installation required:
最快的解决方案，无需安装：
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>
Other versions available at https://cdnjs.com/libraries/foundicons
回答by ob1quixote
I installed via pip install django-zurb-foundationand was running into the same problem …/foundation/iconsworked, but I couldn't reference them in my actual project. What wound up working for me is adding the following to my project's base.html
我通过安装pip install django-zurb-foundation并遇到了同样的问题…/foundation/icons，但我无法在我的实际项目中引用它们。最终为我工作的是将以下内容添加到我的项目中base.html
{% load foundation_tags %}
{% block css %}
{% foundation_css 'foundation-icons' %}
{% endblock css %}
Which is effectively the same as ManelMusti's answer, but handled in the template using the same technique as the example in …/site_packages/foundation/templates/foundation/icons.html
这实际上与ManelMusti的答案相同，但在模板中使用与示例中的示例相同的技术进行处理…/site_packages/foundation/templates/foundation/icons.html
回答by ManelPNavarro
The correct way is <i class="fi-star"></i>instead of <i class="ft-star"></i>
正确的方法是<i class="fi-star"></i>代替<i class="ft-star"></i>
