0

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

4

4 回答 4

6

我下载了这些文件，它们的文件扩展名为“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它，它会起作用。

于 2013-05-15T01:32:57.073 回答
1

当您下载字体时，您将能够简单地将样式表和字体文件夹直接合并到 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>

来自基金会文档。

于 2013-05-15T00:00:42.077 回答
1

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

  1. 下载图标

  2. 将下载的文件夹“foundation-icons”移动到您的css文件夹中

  3. 将以下行放入<head>您的 html 部分<link rel="stylesheet" href="css/foundation-icons/foundation-icons.css" />

  4. <body>然后在你的 html中的任何地方放置一个向上箭头（或其他图标）<i class="fi-up-arrow"></i>

于 2014-03-16T21:26:58.637 回答
1

幻影编辑

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

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

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

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

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

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

4) 确保 Compass 已打开，并且您已将其用于查看 Foundation 文件夹！哟。

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

于 2013-09-30T14:08:28.993 回答