89

我正在使用 Font Awesome Sass 文件https://github.com/FortAwesome/Font-Awesome/blob/master/sass/font-awesome.sass使其成为_font-awesome.sass以便我可以@import在我的 Sass 项目中使用。我还使用http://middlemanapp.com/将Sass转换为Css。问题：

  1. 有没有办法只将使用过的图标类带入我转换的 .css 中？因为现在它承载了_font-awesome.sass 中的所有类

  2. 奖励：是否可以使用使用的图标类以某种方式重新编译字体以使其在生产使用中更小？

如果我能在上面的#1 中得到一些提示，那就太好了。

谢谢。

4

8 回答 8

89

Sass 不知道你实际使用的是什么类。这是您必须自己手动修剪的东西。打开提供的 .scss 文件并删除您不需要的任何内容。

编辑字体文件本身以消除不需要的字形需要 3rd 方应用程序来执行此操作，并且超出了此问题的范围。

Fontello是一个在线网络服务，可以为您完成所有这些工作。它允许您在多个图标字体集合之间混合和匹配，为您的项目创建完美的字体文件。除了自定义的字体文件，它还提供了多个 .css 文件，其中包含已经为您生成的样式（将扩展名更改为 .scss 将允许您将它们导入到现有的 Sass 项目中）。

于 2013-03-22T20:54:25.027 回答
45

fontello 非常好，但IcoMoon更棒。

于 2014-01-08T05:20:31.980 回答
11

您现在可以从 Font-awesome 子集图标以供生产使用。现在有一个名为icnfnt的官方子集工具，它允许您从当前版本的 Font-awesome (v3.0.2) 中选择和打包您需要的图标。

自定义下载还包括所有 CSS、LESS、SCSS 和 SASS 代码！

于 2013-03-22T01:39:52.883 回答
7

我使用 LESS 而不是 SASS，所以你可能需要调整你的实现。

环境：

  • 字体真棒4.5.0（当前版本）
  • Ubuntu 14.04 LTS
  • 重击

使用它来生成您需要的 Unicode 字符编号列表：

fa_icons="globe|vimeo|youtube|facebook|twitter|google-plus"
for code in $(egrep "^@fa-var-($fa_icons):" less/font-awesome/variables.less | cut -d ':' -f 2 | sed -e 's/^ "\\//' | sed -e 's/";/,/' | sort ); do echo -n $code; done

然后，您可以在专家模式下将其与 FontSquirrel 一起使用，您可以在其中选择自定义子集：http ://www.fontsquirrel.com/tools/webfont-generator

在 Unicode 范围内，输入上面的逗号分隔值。

然后从 CSS 中删除不必要的东西：

egrep "@fa-var-($fa_icons);" less/font-awesome/icons.less

您需要打开less/font-awesome/icons.lessgrep 的输出并将其粘贴到文件中。

于 2016-01-06T16:55:02.090 回答
2

好吧，sass 当然可以稍微调整一下以使选择器%基于，因此它们只能是可扩展的。完成此操作后，可以制作类以匹配所需的图标，然后可以制作@extend令人敬畏的字体类。

就个人而言，我这样做了，实际上并没有使用标记中的类，而只是将选择器用于相关元素并将@extend它们与这些类一起使用。

例子：

// _icons.scss
%#{$fa-css-prefix}-glass:before { content: $fa-var-glass; }
...

// _core.scss
%#{$fa-css-prefix} {
    ...
}

然后在你的scss

a.search {
    @extend %fa;
    @extend %fa-search;
}

等等。

于 2015-02-10T17:27:27.560 回答
2

Fontastic为我工作（它在Font Awesome github 页面上列出）。选择您需要的字形并将它们作为新的自定义字体下载。优秀的工具。

于 2016-02-09T15:54:20.577 回答
1

Iconmoon 为我工作。我通过从 font-awesome 导入 svg 文件来使用它，从而确保我得到我想要的图标，而不仅仅是他们网站上可用的图标。此链接还帮助我集成了新图标 https://tonyxu.io/posts/2018/use-icomoon-to-reduce-fontawesome-size/

于 2020-05-13T13:15:48.390 回答
0

这里的所有其他优化工具都是基于浏览器的。如果您正在寻找可以轻松自动化并在本地运行的东西，这fontite可能是最佳选择。

您将在 TOML 配置文件中列出您正在使用的图标。它将仅使用这些类创建 CSS，并且仅将这些图标打包到您的最终字体文件中。您甚至可以将 Font Awesome Brands、Font Awesome Solid 等中的图标组合到相同的 CSS 和字体文件中。

于 2022-02-04T05:28:50.870 回答