web-dev-qa-db-ja.com

SassでFont Awesomeを使用する

Web CompassプロジェクトでFontAwesomeを使用しようとしています。 FontAwesomeページ には特定のドキュメントがなく、Bootstrapを使用していないため、「Bootstrapを使用していませんか？」に従いました。方向が、それを動作させることはできません。

出力

特定のエラーは見つかりません。エラーが見つかりません。何も表示されず、アイコンもテキストも表示されません。 FontAwesomeフォントファイルが読み込まれていないようです。

私がやったステップ

  1. _font-awesome_ディレクトリをダウンロードします
  2. プロジェクトのcssフォルダーにコピーします。ここにはすべてのコンパイル済みcssがあります：_project/css/font-awesome_
  3. この@import url("font-awesome/scss/font-awesome.scss");のようなメインのsassスタイルシートに_font-awesome.scss_ファイルをインポートします
  4. _font-awesome.scss_ファイルを開き、インポートパスを変更して、cssでコンパイルされたファイルとの相対的な位置になり、@import url("font-awesome/scss/_variables.scss");のようになります。
  5. Font-awesome/scssディレクトリ内の__variables.scss_パーシャルを開き、デフォルトの_@FontAwesomePath_をデフォルトの_"font-awesome/font/"_からWebフォントの場所に合わせて変更します
  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_を使用してエラーなしでメインのsassスタイルシートをコンパイルします

  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
_


だから誰かがここまで読んだことがあれば、すでに感謝していますが、何かアイデアはありますか？

sasscompass-sassfont-awesome
25
ithil

わかりました、私はそれの助けを得て、主要な問題であったパスに関するいくつかの問題がありました。私の立場にある誰かを助けるためにここでそれらを説明します。

問題は次のとおりでした：実際、フォントファイルがロードされていませんでした

エラー：主にパスに関連し、@ importでのコンパスとsassの動作

上記の私のステップの修正：

1）あなたはその上で間違ったことをすることはできません...

2）最初に、フォルダー全体をcssディレクトリーに入れないでください。各タイプのファイルはそのディレクトリに配置する必要があります。したがって、sassディレクトリの下の.scssファイル、css/fontsディレクトリの下のフォントファイル（.ttf、.woffなど）。

@importの動作方法のため、これはSassで重要です。 Sass Reference では

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が（デフォルトで）どのように見えるかを考慮してパスを2回チェックする現在のsassディレクトリ。

39
ithil

それは私のために働く：

  1. 次のコマンドを実行します。

    npm install font-awesome --save-dev

  2. これらの行をindex.scssに追加します。

    $fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
26
uri gat

この方法は機能しますが、新しいプロジェクトをセットアップしてすべてのファイルをリンクするたびに、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";
  }
}
4
Ekaterina Zdorov

カスタムフォントの素晴らしいsassをインストールする手順。

  1. Font-awesomeフォルダーをダウンロードして解凍します。

  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/

1
Wasim Khan

でフォントがすごい

yarn add font-awesomeまたは

bower install font-awesome（非推奨）

次に、font-awesomeディレクトリに移動し、fontsフォルダーをコピーして貼り付けますone folder up 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";

1
abe312