首页 文章

使用FontAwesome和Sass

提问于
浏览 次
22

我'm trying to use FontAwesome in a web Compass project. As there'在FontAwesome page中没有具体的文档，我'm not using Bootstrap, I'遵循"Not using Bootstrap?"方向，但无法使其正常工作 .

输出

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

我已经完成的步骤

  • 下载 font-awesome 目录

  • 将它复制到我的项目css文件夹，在那里我有我所有已编译的css： project/css/font-awesome

  • 在我的主sass样式表中导入 font-awesome.scss 文件，如 @import url("font-awesome/scss/font-awesome.scss");

  • 打开 font-awesome.scss 文件并更改导入路径，现在相对于我的css编译文件，看起来像这样 @import url("font-awesome/scss/_variables.scss");

  • 在font-awesome / scss目录中打开 _variables.scss partial并将 @FontAwesomePath 默认更改为 "font-awesome/font/" ，以匹配webfonts的位置

  • 在我的html文件中，在FontAwesome examples page中添加了一个示例，所以我添加了一个 <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 编译我的主sass样式表，没有错误

  • 上传了所有内容

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

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

所以，如果有人读过这里，我已经欣赏了，请问任何想法？

sass compass-sass font-awesome

5 回答

  • 1

    好的，我得到了帮助，主要问题是路径有几个问题 . 我会在这里解释它们，以防它帮助我的位置 .

    The problem was: 确实没有加载字体文件

    The errors: 主要与路径以及指南针和sass在@import中的行为有关

    The corrections to my steps above:

    1）你不能对那个做错...

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

    由于 @import 的工作方式，这在Sass中非常重要 . 在Sass Reference说

    Sass在当前目录中查找其他Sass文件，在Rack，Rails或Merb下查找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）这是不必要的，它已经在我正在导入的字体-awesome.scss中 . 干 .

    8）同上，不必要 .

    9＆10）是的女孩，干得好

    So, what to learn from this ：检查您的路径两次，考虑Sass中的@import如何仅在当前的sass目录中查找（默认情况下） .

    回复于
  • 39

    That work for me:

    • 运行命令：
    npm install font-awesome --save-dev
    • 将这些行添加到index.scss：
    $fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
    回复于
  • 4

    此方法正常，但每次设置新项目并链接所有文件时，都必须下载整个fontawesome文件夹 . 通过安装SASS Ruby Gem，您可以避免额外的工作 .

    Open Terminal and do:
gem install font-awesome-sass
Remember that you should have administrator rights on your computer.
If you are an administrator and getting this:

ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the /Library/Ruby/Gems/2.0.0 directory.

Try to install as super user:
sudo gem install font-awesome-sass
You’ll need to enter your password.

You should get this if installation was successful:

Successfully installed font-awesome-sass-4.1.0
Parsing documentation for font-awesome-sass-4.1.0
1 gem installed

Next open your sass file and import font-awesome library:
@import "/Library/Ruby/Gems/2.0.0/gems/font-awesome-sass-4.1.0/vendor/assets/stylesheets/font-awesome";
I am a mac user and in my case the gem is installed into this location. You should figure out where it stores on your windows machine.
It’s important to use absolute path. It won’t work if you do:
@import "font-awesome”Because you installed ruby gem, it is not part of compass (as I mistakenly thought in the beginning).

Download fontAwesome from fontawesome.io and unzip it. Copy font-awesome fonts into your css folder under fonts directory. Like here:
Screen Shot 2014-08-28 at 2.14.07 PM

In your .sass add a font-face FontAwesome somewhere on top of the file:

@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
src: url("fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("fonts/fontawesome-webfont.woff") format("woff"),
url("fonts/fontawesome-webfont.ttf") format("truetype"),
url("fonts/fontawesome-webfont.svg") format("svg");
font-weight: normal;
font-style: normal;
}

All set
Now you can use fontAwesome in your project!
Use FontAwesome inline with <i></i> tag or you can use it via @extend method in your SASS.
Inline method example:

Insert an <i></i> tag where you need it and add classes .fa (default for all icons) and .fa-[icon-name]
<i style="margin:12px;" class="fa fa-camera-retro"></i>

More details about this method you’ll find here
fontawesome website

SASS @extend method example:

$your_selector {
  @extend .fa;
  @extend .fa-camera-retro;
  font-family: $verdana;
  &::before {
    font-family: "FontAwesome";
  }
}
    回复于
  • 1

    安装自定义字体令人敬畏的sass的步骤 .

    • 下载font-awesome文件夹并解压缩 .

    • 打开解压缩的文件夹>> font-awesome / scss，在那里你会找到font-awesome.scss和font-awesome部分文件 . 将所有这些文件移动到项目的scss文件夹中 .

    • 将font-awesome文件夹内的fonts文件夹移动到项目文件夹>> Project / fonts

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

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

    • 链接font-awesome.css到你的头文件 .

    现在，你们都准备好了

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

    回复于
  • 21

    得到font-awesome

    yarn add font-awesome 或

    bower install font-awesome （不推荐）

    现在转到font-awesome目录并复制fonts文件夹并将其粘贴到css文件夹或scss文件夹中的一个文件夹中 . 例如：

    ./ ./bower_components/* ./node_modules/* ./styles/main.scss ./fonts ./index.html

    完成！

    如果您不想复制fonts文件夹，另一种方法是在 main.scss 文件中添加以下行：

    $fa-font-path: "../bower_components/font-awesome/fonts/"; @import "../bower_components/font-awesome/scss/font-awesome";

    回复于

相关问题