25
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2012-11-11

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

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

25
26
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?