6

对于一些简单的 html 页面，我想使用 Fontaweseome 而不用下载它。

我想让我的 CSS 像这样指向 /fontFace：

（即：直接到github URL）

@font-face {
  font-family: 'FontAwesome';
  src: url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/font/fontawesome-webfont.eot?v=3.2.1');
  src: url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('http://fortawesome.github.io/Font-Awesome/assets/font-awesome/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
  font-weight: normal;
  font-style: normal;
}

我做了......但它似乎不起作用。

没有错误是这样的：

 <i class="icon-bar"></i>

在哪里

  <style>
  i { font-family: 'FontAwesome', sans-serif; }
  </style>

未按预期呈现

4

4 回答 4

18

Font Awesome 包含在 Bootstrap 的 CDN 中。您只需要在您的头部部分添加以下链接

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

就是这样，你可以享受你的图标。您不需要在任何地方使用 font-face 或在样式中调用它，只需以通常的方式将适当的类添加到您的“i”标签中，例如：

<i class="fa fa-download"></i>

见http://fortawesome.github.io/Font-Awesome/get-started/

于 2015-06-25T10:15:40.277 回答
3

我想在不下载的情况下使用 Fontaweseome。（即：直接到github URL）

如果您打算以这种方式使用任何第三方代码，则应确保您已获得要从中下载代码的网站所有者的许可。一些网站会阻止这样的外部链接，因为它会产生带宽成本。我相信 GitHub 就是其中之一——如果他们允许这样做，他们将花费大量资金来提供所有 javascript 和其他代码。

但是，周围有一些网站确实提供此服务。它们被称为 CDN。例如，Google 的 CDN是众所周知的，很多人将其用于 jQuery 等库。

我认为 Google 的 CDN 目前不为 FontAwesome 提供服务，但这是您需要寻找的方向；很可能有一个提供 FontAwesome 的 CDN。我不知道有哪一个在我的脑海中，但快速搜索可能会给你一些线索。

如果做不到这一点，我真的认为自己下载文件没有问题。即使它是一个小站点，也可能比在这里提出问题要省力。

于 2013-09-03T16:31:40.320 回答
3

首先，您的 font-face 声明不正确，应该是：

@font-face { ... }

然后在你的 CSS 中调用它，你需要添加如下内容：

i { 
    font-family: 'FontAwesome', sans-serif; 
}

或者

icon-bar { 
    font-family: 'FontAwesome', sans-serif; 
}

希望这可以帮助。

于 2013-09-03T16:22:04.290 回答
1

您可以使用 Font Awesome CDN 嵌入代码！在这里获取：

http://fontawesome.io/get-started/

在提出这个问题时，也许这个选项不可用。

于 2017-12-06T10:20:18.963 回答