Question

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

Answer 1

我下载了文件，文件扩展名为“sgv”， “ttf”，“woff”。我不确定如何将它们包含在页面中。

下载文件后，您将拥有以下基础字体文件夹结构：

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

Answer 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.

Answer 3

幻像编辑

刚刚在zurb图标字体上发布了一个模糊的字体，而不是F4 ...中提琴，我修复了它。所以我正在重做我的帖子以添加一些非常需要的澄清：

Zurb网站上的说明通常有点模糊。它需要sass的一般知识，而对于sass noobs，它会很快混乱。所以我们走了：

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

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

2）那么_settings.scss文件怎么样？打开它并检查出来！它只是字体的混合物。将该代码和添加放在现有_settings.scss文件夹的顶部附近。当它添加到底部时，它对我没有用。

3）需要在app.scss文件的顶部添加来自Zurb文档页面的CSS剪辑。我把它放在我所有的@import声明之下。

4）确保Compass已启用，并且您已在其中查看Foundation文件夹！佑。

好的，我已经完成了当天的好事。

Answer 4

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

下载图标
将下载的文件夹“foundation-icons”移动到您的css文件夹
将以下一行放入html <head>

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

然后使用<body>

<i class="fi-up-arrow"></i>

Zurb基金会图标一般封闭

4 个答案:

部署的其他提示