附上一般的 Zurb 基金会图标答案

【问题标题】：Zurb Foundation icons general enclosed附上一般的 Zurb 基金会图标
【发布时间】：2014-09-23 11:28:09
【问题描述】：

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

【问题讨论】：

标签： asp.net-mvc zurb-foundation

【解决方案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> 设置为shown on the playground 来开始使用它们。例如：

<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，它会起作用。

【讨论】：

【解决方案2】：

下载字体后，您可以简单地将样式表和字体文件夹直接合并到 Foundation 中。这是 CSS 的样子：

@font-face {
  font-family: '[set]Foundicons';
  src: url('fonts/[set]_foundicons.eot');
  src: url('fonts/[set]_foundicons.eot?#iefix') format('embedded-opentype'),
       url('fonts/[set]_foundicons.woff') format('woff'),
       url('fonts/[set]_foundicons.ttf') format('truetype'),
       url('fonts/[set]_foundicons.svg#[set]Foundicons') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class*="foundicon-"] {
  display: inline;
  width: auto;
  height: auto;
  line-height: inherit;
  vertical-align: baseline;
  background-image: none;
  background-position: 0 0;
  background-repeat: repeat;
}

[class*="foundicon-"]:before {
  font-family: "[set]Foundicons";
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
}

这就是你使用它的方式。

<i class="foundicon-[icon]"></i>

来自Foundation documentation.

【讨论】：

如果我需要在同一页面中使用另一种图标字体，如社交，我试图将社交样式表和其他任何它混淆的样式表，其中一个（我放的最后一个）正常工作还有其他没有？

【解决方案3】：

虚拟编辑

刚刚发布了关于 zurb 图标字体在 F4 上不起作用的简介之后...中提琴，我修复了它。所以我正在重做我的帖子以添加一些急需的澄清：

Zurb 网站上的说明通常有点含糊。它需要 sass 的一般知识，而对于 sass 新手来说，它很快就会变得混乱。所以我们开始：

1) 下载文件后，将它们复制到 Foundation 文件夹中的适用目录。我正在使用 Zend，所以无论你有 Foundation Sass 设置，你都可以放置这些。就像文档说的那样，将 .scss 文件复制到相应的文件夹，将整个新字体目录复制到 Foundation 文件夹，在同一目录级别（就在 Sass 和样式表旁边等）。

注意：这样一个简单的步骤可能会让某些人感到困惑的一个原因是，Zurb 文档使用术语“合并”而不是“添加”文件。实际上只合并了一个文件：_settings.scss

2) 那么 _settings.scss 文件是怎么回事？打开它并检查一下！它只是字体的混合。获取该代码并将其添加到您现有的 _settings.scss 文件夹顶部附近。添加到底部时它对我不起作用。

3) Zurb 文档页面中的 CSS 片段需要添加到 app.scss 文件的顶部。我把它放在我所有的 @import 声明下面。

4) 确保 Compass 已打开，并且您已让其监视您的 Foundation 文件夹！哟。

好的，我今天做了我的好事。

【讨论】：

【解决方案4】：

无需过于复杂。我做了什么：

下载图标
将下载的文件夹“foundation-icons”移动到你的css文件夹中
将以下行放入 html <link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" /> 的 <head> 部分
然后在您的 html 的 <body> 的任意位置添加一个向上箭头（或其他图标），并使用 <i class="fi-up-arrow"></i>

【讨论】：