Help us understand the problem. What is going on with this article?

Railsに手作業でアイコンフォントを導入する方法

More than 5 years have passed since last update.

Twitter Bootstrap Rails利用していれば、デフォルト(?)でFont Awesomeを利用できますが、
こちらのサイトのアイコンを利用したかったので、試行錯誤してみました。
http://www.tenbytwenty.com/sosa.php

下準備

  1. まずは、上記のサイトからファイルをダウンロード。

  2. app/assetsfontsという名前のフォルダを作る。

  3. fontsフォルダにダウンロードしたファイルsosa.eot sosa.svg sosa.ttf sosa.woffをすべて入れる。

  4. app/assets/stylesheetssosa.css.scss.erbという名前のファイルを作る。以下のように入力。各種値はお好みで変更を。

sosa.css.scss.erb
@font-face {
    font-family: 'Sosa';
    src: url('<%= asset_path('sosa.eot') %>');
    src: url('<%= asset_path('sosa.eot') + '?#iefix' %>') format('embedded-opentype'),
         url('<%= asset_path('sosa.woff') %>') format('woff'),
         url('<%= asset_path('sosa.ttf') %>') format('truetype');
         url('<%= asset_path('sosa.svg') + '#SosaRegular' %>') format('svg')
    font-weight: normal;
    font-style: normal;
}
[data-icon]:after {
    display: block;
    content: attr(data-icon);
    font-family: Sosa;
    font-size: 1.8em;
    line-height: 1.4;
    padding-right: 0.2em;
    color: #069CDB;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}
[data-icon].white:after {
    display: block;
    content: attr(data-icon);
    font-family: Sosa;
    font-size: 1.8em;
    line-height: 1.4;
    padding-right: 0.2em;
    color: #ffffff;
    box-shadow: 0 0 3px rgba(0,0,0,0.1);
}

Configへ追加

config/environments/developments.rb
  config.assets.paths << Rails.root.join("app", "assets", "fonts")
  config.assets.precompile += %w( .svg .eot .woff .ttf )
config/environments/production.rb
  config.assets.paths << Rails.root.join("app", "assets", "fonts")
  config.assets.precompile += %w( .svg .eot .woff .ttf )

Viewの書き方

app/views/users/index.html.erb
<span data-icon='0'></span> ...span要素のすぐ後にヘッドフォンがでます。
<span data-icon='0' class="white"></span> ...ヘッドフォンが白になります。

※それぞれのdata-iconのkeyはWebサイトに掲載されています。

HerokuへPushするときの注意点

私の環境では、config/applicaiton.rbconfig.assets.initialize_on_precompile = false を追加しているので、事前にlocal環境でPrecompileしてからPushしたところ成功しました。
(PrecompileせずにPushしたところ、これまで問題なかったCSSまで読み込まれませんでした。また、heroku run rake assets:precompileでも解消しませんでした)

console
$rake assets:precompile

以上です。他のフォントセットでも使えると思いますので、お試しいただければと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした