在Sass中使用FontAwesome
我正在尝试在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.scss
font-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/
你的回答