I am using font-awesome custom css but it is not working in my rails application.
I am getting this error:
ActionController::RoutingError (No route matches [GET] "/fonts/fontawesome-webfont.woff2"):
added font In assets's stylesheet folder make style.css
@font-face { font-family: 'ProximaNovaA-Light'; src:
url('ProximaNovaA-Light.otf') format('opentype'),
url('ProximaNovaA-Light.woff') format('woff'),
url('ProximaNovaA-Light.eot') format('embedded-opentype'),
url('ProximaNovaA-Light.ttf') format('truetype'),
url('ProximaNovaA-Light.svg#ProximaNovaA-Light') format('svg');
font-weight: normal; font-style: normal; }
I think this is a path issue, how can we fix it?
change that file to .erb
and
url('fontawesome-webfont.woff2')
to
url(<%= asset_path 'fontawesome-webfont.woff2' %>)
or install the fontawesome gem
url('ProximaNovaA-Light.otf')
is not working.
This is my url in the browser developer tools sources
tab. I display url
This the detail of my code, as you can see I commented url()
tags and uset the asset_path
erb helper
As you have a runtime error you can not check the url, but the message says that your url is /fonts/fontawesome-webfont.woff2
.
As you see my url is /assets/ElegantIcons-912b4fcc232e1f45d329e2a127bca4bdf3195d965a2abce223b068e3c3c7db6a.eot
, because the idea of the asset pipeline is pre-compiling assets with a digest.
The digest is the code 912b4fcc232e1f45d329e2a127bca4bdf3195d965a2abce223b068e3c3c7db6a
that identifies the asset in my folder /public/assets
, where a temporary copy of my stylesheets, javascripts, images are saved.
That is the location where files are saved and read ( /public/assets
). The url()
helper is not converting the relative path /fonts/fontawesome-webfont.woff2
for the file app/asset/fonts/fontawesome-webfont.woff2
into public/assets/fontawesome-webfont-digestcode.woff2
Actually this is a big issue with Rails Asset Pipeline discussed in this post .
The other scenario is that you do not have that image.
This is the code I used in my custom fonts file elegant-icons-style.scss.erb
to import those images.
@font-face {
font-family: 'ElegantIcons';
src: url(<%= asset_path 'ElegantIcons.eot' %>),
url(<%= asset_path 'ElegantIcons.eot?#iefix' %>) format('embedded-opentype'),
url(<%= asset_path 'ElegantIcons.woff' %>) format('woff'),
url(<%= asset_path 'ElegantIcons.ttf' %>) format('truetype'),
url(<%= asset_path 'ElegantIcons.svg' %>) format('svg');
/*src: url('/assets/ElegantIcons.eot');
src: url('/assets/ElegantIcons.eot?#iefix') format('embedded-opentype'),
url('/assets/ElegantIcons.woff') format('woff'),
url('/assets/ElegantIcons.ttf') format('truetype'),
url('/assets/ElegantIcons.svg#ElegantIcons') format('svg');*/
font-weight: normal;
font-style: normal;
}
Try this
font-family: '/assets/ProximaNovaA-Light';
src: url('/assets/ProximaNovaA-Light.otf') format('opentype')
change that mycssfile.css
file to mycssfile.css.erb
(add .erb
end of file, then you can use rails code in .css.erb
file)
and in mycssfile.css.erb
file, change:
url('fontawesome-webfont.woff2')
to
url(<%= asset_path 'fontawesome-webfont.woff2' %>)
Final code in .css.erb
file:
@font-face { font-family: 'ProximaNovaA-Light'; src:
url(<%= asset_path 'ProximaNovaA-Light.otf' %>) format('opentype'),
url(<%= asset_path 'ProximaNovaA-Light.woff' %>) format('woff'),
url(<%= asset_path 'ProximaNovaA-Light.eot' %>) format('embedded-opentype'),
url(<%= asset_path 'ProximaNovaA-Light.ttf' %>) format('truetype'),
url(<%= asset_path 'ProximaNovaA-Light.svg' %>#ProximaNovaA-Light) format('svg');
font-weight: normal; font-style: normal; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.