在Sass中使用FontAwesome
卡卡西 · 03月23日
我正在尝试在Web Compass项目中使用FontAwesome。由于FontAwesome页面上没有特定的文档，并且我没有使用Bootstrap，因此我遵循了“不使用Bootstrap？指示，但无法使其正常工作。
输出
我没有发现具体错误，无论是未找到还是编译错误。它只是不显示任何内容，没有图标或文本。FontAwesome字体文件似乎没有加载。
我已经完成的步骤
- 下载
font-awesome目录 - 将其复制到我的项目css文件夹中，在该文件夹中我所有的编译后的css：
project/css/font-awesome font-awesome.scss像这样将文件导入我的主要sass样式表中@import url("font-awesome/scss/font-awesome.scss");- 打开
font-awesome.scss文件并更改导入路径，现在相对于我的css编译文件，如下所示@import url("font-awesome/scss/_variables.scss"); - 打开
_variables.scssfont-awesome / scss目录中的partial，并将其@FontAwesomePath从默认的更改为"font-awesome/font/"，以匹配webfonts的位置 - 在我的html文件中，在FontAwesome示例页面中添加了一个示例，因此我添加了一个
<i class="icon-camera-retro"></i> Some text 在我的主要sass文件中，添加了
@font-face声明@include font-face('FontAwesome', font-files( 'font-awesome/font/fontawesome-webfont.woff', woff, 'font-awesome/font/fontawesome-webfont.ttf', ttf, 'font-awesome/font/fontawesome-webfont.svg', svg), 'font-awesome/font/fontawesome-webfont.eot'); %icon-font { font-family: 'FontAwesome', Helvetica, Arial, sans-serif; }在选择器中扩展字体
.icon-camera-retro { @extend %icon-font; }使用编译我的主要青菜样式表
compass --watch没有任何错误- 上载了所有内容
为了澄清，这是我的项目的结构：
root
sass
mainsass.scss
css
font-awesome
css
font-awesome.css
font
font-archives.ttf/.woff/etc
scss
_partials (_variables.scss, _path.scss, _core.scss, etc)
font-awesome.scss
fonts
some-custom-font.ttf
mainsass.css
因此，如果有人读过这里（我已经很感激），请问有什么想法吗？
对我有用：
运行命令：
将这些行添加到index.scss：
通过获得真棒字体
yarn add font-awesome要么bower install font-awesome（不建议）现在转到font-awesome目录，复制fonts文件夹，并将其粘贴到css文件夹或scss文件夹中的一个文件夹。例如：
./ ./bower_components/* ./node_modules/* ./styles/main.scss ./fonts ./index.html做完了！
如果您不想复制字体文件夹，则另一种方法是在文件中添加以下行
main.scss：$fa-font-path: "../bower_components/font-awesome/fonts/"; @import "../bower_components/font-awesome/scss/font-awesome";好的，我对此有所帮助，并且路径有几个主要问题。我将在这里解释它们，以防它对我的位置有所帮助。
问题是：确实，字体文件没有加载
错误：主要与路径以及@import的指南针和萨斯行为有关
我上述步骤的更正：
1）您不能在那上面做错...
2）首先，不要将整个文件夹放在css目录中。每种类型的文件都应放在其目录中，因此sass目录下的.scss文件，css / fonts目录下的字体文件（.ttf，.woff等）。
由于工作方式，这在Sass中很重要
@import。在萨斯参考说我忽略了这一点，并将我的.scss文件放在其他目录中，这就是为什么通常
@import找不到它们的原因。这将我们引向下一点。3）尝试将.scss文件作为url（）导入是很愚蠢的，我之所以这样做是因为常规文件
@import无法正常工作。一旦font-awesome.scss文件位于我的sass目录中，我现在可以@import "font-awesome/font-awesome.scss"4）此处相同，
@import路径是相对于.scss文件的，并且只要font-awesome.scss及其部分位于同一文件夹中，无需触摸它们。5）是的，您需要更改
@FontAwesomePath来匹配您的字体目录6）确定您需要一个HTML示例进行测试，所以在这里好
7）这是不必要的，它已经在我要导入的font-awesome.scss中。干。
8）与上述相同，也不必要。
9＆10）是的，女孩，干得好
因此，您可以从中学到什么：两次检查您的路径，同时考虑到Sass中的@import仅在当前sass目录中看起来（默认）。
安装自定义字体真棒sass的步骤。
下载真棒字体文件夹并将其解压缩。
打开提取的文件夹>> font-awesome / scss，在这里您会找到font-awesome.scss和font-awesome部分文件。将所有这些文件移动到项目的scss文件夹中。
将font-awesome文件夹内的fonts文件夹移到您的项目文件夹>> Project / fonts
打开_varaible.scss并将路径更改为
$ fa-font-path：“ ../fonts”！default; {在这种情况下，字体的相对路径是../../fonts}
现在，您已经准备就绪
https://fortawesome.github.io/Font-Awesome/get-started/
你的回答