LoginSignup
6
6

More than 5 years have passed since last update.

rails3のassetsにデザイナーさんからもらったアイコンフォントを置いて使えるようにする

Posted at

古いプロジェクトなので3系ですが4系でもいけるはず(参考文献より)

状況

  • デザイナーさんから受け取ったhtml/css/js/img/font一式を既存のrailsプロジェクトに結合する
  • デザイナーさんのマークアップをほとんど汚さずにerbを埋め込みたい

課題

  • アイコンフォントの位置に□のようなものが表示されているので名前解決を良い具合にしないといけない

解法

  • app/assets/fontsを作って直下にもらったフォントファイル類を配置する
  • cssの頭で@font-faceを書いて読み込む
app/assets/stylesheets/style.css

@font-face {
    font-family: 'fontello';
    src: url('/assets/fontello.eot');
    src: url('/assets/fontello?iefix') format('eot'),
         url('/assets/fontello.woff') format('woff'),
         url('/assets/fontello.ttf') format('truetype'),
         url('/assets/fontello.svg#webfont') format('svg');
}

結果

表示できました

Screen Shot 2014-06-14 at 20.31.06.png

参考文献

Rails 4 で assets に font を追加する方法
How to use fonts in Rails 4

6
6
0

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
6
6