Icomoon Fonts in Rails

1. Use IcoMoon App to prepare my batch of icons I want to use.

2. Import whatever icon libraries I plan to use into IcoMoon app, then select the individual icons I want.

3. Click “Generate font” (at the bottom)

4. Download the .zip file

5. Copy the font files (icomoon.eot, icomoon.svg, icomoon.ttf, icomoon.woff) into app/assets/fonts

6. rename the style.css that icomoon provided to icomoon.css.scss. Move this file into app/assets/stylesheets

7. In icomoon.css.scss, make the following change. Note: Even though you’re placing the icomoon files inside app/assets/fonts/ you still must reference them without the /fonts/ folder. Just make the references like this, and also remove the ?… stuff after the file names:

@font-face { font-family: 'icomoon'; src: url('icomoon.eot?r8vt3x'); src: url('icomoon.eot?r8vt3x#iefix') format('embedded-opentype'), url('icomoon.ttf?r8vt3x') format('truetype'), url('icomoon.woff?r8vt3x') format('woff'), url('icomoon.svg?r8vt3x#icomoon') format('svg'); font-weight: normal; font-style: normal; }

To this:

@font-face { font-family: 'icomoon'; src: font-url('icomoon.eot'); src: font-url('icomoon.eot?#iefix') format('embedded-opentype'), font-url('icomoon.ttf') format('truetype'), font-url('icomoon.woff') format('woff'), font-url('icomoon.svg?#icomoon') format('svg'); font-weight: normal; font-style: normal; }

8. Add the following to application.css: *= require icomoon

9. In config/application.rb, add the following:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

10. In config/environments/development.rb, config/environments/staging.rb, config/environments/production.rb add the following:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts') config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

11. In IcoMoon App, click “get code” for each icon, then copy the HTML snippet and drop into a view in Rails.

Restart the Rails server. Icons should now display.