I just started another small side project based on a fresh
rails 5 setup.
bulma uses font-awesome but does not package it in their framework, which is fair.
They suggest that you use a CDN copy of
font-awesome. Now, in production I may do such a thing, but:
1) I want to be able to develop offline. There is nothing worse than refreshing a page and it looks like crap because you are in a tunnel on the train.
2) This side project needs to be self hosted so I want to vendor the library rather than rely on CDN’s
3) A weak reason, but I remember reading an article I can’t find about just how much meta-data is sniffed and compiled about users of CDN’s. You can’t escape it normally, but why add to it. *Looks for tin hat*
Font-Awesome extract them into the relevant
app/assets in my
rails app, and start writing the layout template.
It was at this point that I hit the issue that I couldn’t see any fonts from
font-awesome. The inspector told me that the resources were getting 404 and rails told me no such routes existed.
Alright then I must be doing something wrong. Actually as
rails has a complex assets system using
sprockets there are a couple more steps that involve editing the
.css files of font awesome.
1) Create the folder
app/assets/fonts and place your fonts in there.
config/application.rb and add
config.assets.paths << Rails.root.join("app", "assets", "fonts"). This will add the new fonts folder to the assets system, which will allow them to be served.
font-awesome.css.erb. This will allow the file to be processed for
4) Edit the
css file, changing all paths to the fonts to
erb snippets using rails helpers to inject the correct path there: (or just copy and paste this below:
src: url('<%= asset_path("fontawesome-webfont.eot") %>'); src: url('<%= asset_path("fontawesome-webfont.eot") + "?#iefix" %>') format('embedded-opentype'), url('<%= asset_path("fontawesome-webfont.woff2") %>') format ('woff2'), url('<%= asset_path("fontawesome-webfont.woff") %>') format('woff'), url('<%= asset_path("fontawesome-webfont.ttf") %>') format('truetype'), url('<%= asset_path("fontawesome-webfont.svg") + "#fontawesomeregular" %>') format('svg');
5) Restart your
rails server and hey, you should have font. And if you don’t well…. Happy hunting.