在Sass中使用FontAwesome

sass CSS

卡卡西

2020-03-23

我正在尝试在Web Compass项目中使用FontAwesome。由于FontAwesome页面上没有特定的文档，并且我没有使用Bootstrap，因此我遵循了“不使用Bootstrap？指示，但无法使其正常工作。

输出

我没有发现具体错误，无论是未找到还是编译错误。它只是不显示任何内容，没有图标或文本。FontAwesome字体文件似乎没有加载。

我已经完成的步骤

  1. 下载font-awesome目录
  2. 将其复制到我的项目css文件夹中，在该文件夹中我所有的编译后的css： project/css/font-awesome
  3. font-awesome.scss像这样将文件导入我的主要sass样式表中@import url("font-awesome/scss/font-awesome.scss");
  4. 打开font-awesome.scss文件并更改导入路径，现在相对于我的css编译文件，如下所示@import url("font-awesome/scss/_variables.scss");
  5. 打开_variables.scssfont-awesome / scss目录中的partial，并将其@FontAwesomePath从默认的更改为"font-awesome/font/"，以匹配webfonts的位置
  6. 在我的html文件中，在FontAwesome示例页面中添加了一个示例，因此我添加了一个<i class="icon-camera-retro"></i> Some text

  7. 在我的主要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;
  }

  8. 在选择器中扩展字体 

    .icon-camera-retro {
    @extend %icon-font;
 }

  9. 使用编译我的主要青菜样式表compass --watch没有任何错误

  10. 上载了所有内容


为了澄清，这是我的项目的结构：

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


因此，如果有人读过这里（我已经很感激），请问有什么想法吗？

第2599篇《在Sass中使用FontAwesome》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
小小 2020.03.23

对我有用：

  1. 运行命令：

    npm install font-awesome --save-dev

  2. 将这些行添加到index.scss：

    $fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
小胖 2020.03.23

通过获得真棒字体

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";

番长 2020.03.23

好的，我对此有所帮助，并且路径有几个主要问题。我将在这里解释它们，以防它对我的位置有所帮助。

问题是：确实，字体文件没有加载

错误：主要与路径以及@import的指南针和萨斯行为有关

我上述步骤的更正：

1）您不能在那上面做错...

2）首先，不要将整个文件夹放在css目录中。每种类型的文件都应放在其目录中，因此sass目录下的.scss文件，css / fonts目录下的字体文件（.ttf，.woff等）。

由于工作方式，这在Sass中很重要@import。在萨斯参考说

Sass在当前目录以及Rack，Rails或Merb下的Sass文件目录中查找其他Sass文件。可以使用：load_paths选项或命令行上的--load-path选项指定其他搜索目录。

我忽略了这一点，并将我的.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目录中看起来（默认）。

小卤蛋 2020.03.23

安装自定义字体真棒sass的步骤。

  1. 下载真棒字体文件夹并将其解压缩。

  2. 打开提取的文件夹>> font-awesome / scss，在这里您会找到font-awesome.scss和font-awesome部分文件。将所有这些文件移动到项目的scss文件夹中。

  3. 将font-awesome文件夹内的fonts文件夹移到您的项目文件夹>> Project / fonts

  4. 打开_varaible.scss并将路径更改为

$ fa-font-path：“ ../fonts”！default; {在这种情况下，字体的相对路径是../../fonts}

  1. 将font-awesome.css链接到头文件。

现在，您已经准备就绪

https://fortawesome.github.io/Font-Awesome/get-started/

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android