如何设置Zurb Foundation图标？
兽码
我已经下载了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>
托德
基金会图标使用<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; }
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
在为网站使用Zurb Foundation时如何安全设置样式？
- 2
如何使用Foundation 5 Zurb设置输入元素的宽度
- 3
将Zurb Foundation图标字体合并到Moovweb中
- 4
Zurb Foundation：通过CLI设置项目后如何使下拉菜单正常工作
- 5
如何在zurb Foundation中设置仅适用于移动设备的样式
- 6
Zurb Foundation：通过CLI设置项目后如何使下拉菜单正常工作
- 7
如何手动安装Zurb Foundation？
- 8
如何关闭Zurb Foundation Abide实时验证？
- 9
如何关闭Zurb Foundation Abide实时验证？
- 10
Zurb Foundation如何检测javascript组件？
- 11
如何让 Zurb Foundation 的 flexbox 类工作？
- 12
如何在Expression Engine中使用Foundation 5.0图标字体
- 13
Zurb Foundation-图标字体类格式奇怪地没有相邻文本
- 14
网站首次加载时，Zurb Foundation图标未加载；解决是否单击链接
- 15
如何在Zurb Foundation下拉菜单中添加溢出？
- 16
如何确定我正在运行哪个版本的Zurb Foundation
- 17
如何在zurb Foundation中增加行宽？
- 18
如何在Zurb Foundation中抽出列背景？
- 19
如何在Zurb Foundation网格列上添加边框？
- 20
如何使用Zurb Foundation提交表单数据
- 21
您如何在Zurb Foundation中抽出专栏背景？
- 22
Zurb Foundation 5，如何使用罗盘升级javascript？
- 23
如何确定我正在运行哪个版本的Zurb Foundation
- 24
如何在Django Zurb Foundation中使用SASS / SCSS？
- 25
如何在Zurb-Foundation中使图像跨多行？
- 26
如何从Zurb Foundation中删除身体周围的多余空白
- 27
如何确定使用 CLI 下载的 Foundation Zurb 模板的版本？
- 28
如何反转，反转，悬停zurb基础中的图标？
- 29
Zurb Foundation Framework的Browserify
我来说两句