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.
Last updated