Zurb基金会图标一般封闭

Question

我正在尝试使用Zurb Foundation General Enclosed字体图标.我下载了这些文件,它们的文件扩展名为"sgv","ttf","woff".我不确定如何将它们包含在页面中.我对此完全陌生.我搜索谷歌并阅读了一些博客,但我仍然感到困惑.我不确定如何设置文件以使它们工作.我的平台是asp.net mvc.谢谢

Answer 1

我下载了这些文件,它们的文件扩展名为"sgv","ttf","woff".我不确定如何将它们包含在页面中.

下载文件后,您将拥有以下Foundation Fonts文件夹结构:

- foundation_icons_general_enclosed
--- fonts
--- saas
--- stylesheets

在ASP.net项目中,最好将样式放在单独的文件中,以便在有来自Foundation的更新时快速更新.您也可以将它们复制到自己的文件夹中.因此Content,默认情况下您有一个文件夹,您可以拥有以下结构:

- Content
--- fonts - copy `eot`, `sgv`, `ttf`, and `woff` files
--- addon - copy `general_enclosed_foundicons.css`

复制文件后,需要调整样式以指向正确的字体文件,例如:

@font-face {
    url("../fonts/general_foundicons.eot")

然后引用文件,以便在项目中使用它们

<link href="@Url.Content("~/Content/addon/general_foundicons.css")" 
    rel="stylesheet" type="text/css" />

你可以开始做使用它们<i class="foundicon-[icon]"></i>作为在操场上显示.例如:

<i class="general foundicon-add-doc"></i>
// to use it as a link
<a href="some_url"><i class="general foundicon-add-doc"></i></a>

部署的附加提示

如果它是您第一次在网站中使用字体,则部署后字体将无法使用.如果遇到此问题,请确保IIS中包含以下MIME类型.我忘了哪些是默认的,但我确定你默认不会有以下内容:

• 文件扩展名: .svg
• MIME类型: image/svg+xml
• 文件扩展名: .ttf
• MIME类型: application/octet-stream
• 文件扩展名: .eot
• MIME类型: application/octet-stream

你可以放弃它.woff,它会工作.