sass - Sass で FontAwesome を使用する

Question

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 ディレクトリ内のパーシャルを開き、 Web フォントがある場所に一致する@FontAwesomePathように、デフォルトのものからに変更します。"font-awesome/font/"
私の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エラーなしでメインの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

それで、誰かがここまで読んだことがあれば、私はすでに感謝していますが、何かアイデアをお願いします?

score 42 · Accepted Answer

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

問題は、実際、フォントファイルが読み込まれていないことでした。

エラー:主にパスに関連し、コンパスと sass が @import でどのように動作するか

上記の私の手順の修正：

1) 間違いはありません...

2) まず、フォルダ全体を css ディレクトリに置かないでください。各タイプのファイルはそれぞれのディレクトリに配置する必要があるため、.scss ファイルは sass ディレクトリの下に、フォントファイル (.ttf、.woff など) は css/fonts ディレクトリの下に配置します。

これは、Sass の@import仕組み上、重要です。Sassリファレンスで言う

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 とそのパーシャルが同じフォルダーにある限り、これらに触れる必要はありません。

@FontAwesomePath5) そのとおりです。フォントディレクトリに合わせてを変更する必要があります。

6) 確かに、テスト用の HTML の例が必要なので、ここで OK です

7) それは不要でした。インポートしている font-awesome.scss に既に含まれています。ドライ。

8) 同上、不要。

9 & 10) ええ女の子、よくやった

したがって、これから何を学ぶべきか: Sass の @import が現在の sass ディレクトリのみを (デフォルトで) どのように見えるかを考慮して、パスを 2 回確認してください。

score 4 · Accepted Answer

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

score 2 · Accepted Answer

font-awesome を取得する

yarn add font-awesome また

bower install font-awesome(非推奨)

font-awesome ディレクトリに移動し、fonts フォルダーをコピーして、css フォルダーまたは scss フォルダーの1 つ上のフォルダーに貼り付けます。例えば：

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

score 1 · Accepted Answer

カスタム font-awesome 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/

sass - Sass で FontAwesome を使用する

出力

私が行った手順

6 に答える 6

Related

Reference