In my project, I want to use icon font.
This is some content of icon.styl:
#font-face {
font-family: 'sell-icon';
src: url('../fonts/sell-icon.eot?o23a15');
src: url('../fonts/sell-icon.eot?o23a15#iefix') format('embedded-opentype'),
url('../fonts/sell-icon.ttf?o23a15') format('truetype'),
url('../fonts/sell-icon.woff?o23a15') format('woff'),
url('../fonts/sell-icon.svg?o23a15#sell-icon') format('svg');
font-weight: normal;
font-style: normal;
}
But unlucky, I have got 4 errors when compiling:
ERROR Failed to compile with 4 errors
11:22:32
These relative modules were not found:
* ../fonts/sell-icon.eot?o23a15 in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-12835cef","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue
* ../fonts/sell-icon.svg?o23a15 in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-12835cef","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue
* ../fonts/sell-icon.ttf?o23a15 in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-12835cef","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue
* ../fonts/sell-icon.woff?o23a15 in ./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-12835cef","scoped":false,"hasInlineConfig":false}!./node_modules/stylus-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/header/header.vue
I have installed stylus-loader and css-loader:
npm install stylus stylus-loader --save-dev
npm install stylus css-loader --save-dev
And fonts and stylus are in the same directory. files of sell-icon.* are in fonts directory. icon.styl is in stylus directory.
Who can help me?
Related
I have a project I am working on in django and i am trying to load locally installed fonts with the .tff extensions but they dont seem to be working. My css code is
#font-face {
font-family: 'JandaAppleCobbler';
src: url('../fonts/JandaAppleCobbler.tff') format("truetype"), local('JandaAppleCobbler');
}
My directory structure is
--static
|--css
| |--main.css
|
|--fonts
|--JandaAppleCobbler.tff
For the life of me, I can't get self-hosted FontAwesome icons to render in my Angular 2 application.
My Directory structure for these fonts is:
/src/assets/app/fonts/font-awesome/4.7.0/
WebPack is using /src/ as the root when serving the site locally.
To reduce http requests in my app, I have inlined the minified FontAwesome css in my index.html file, and specified the #font-face as such in index.html:
#font-face{
font-family: 'FontAwesome';
src: local('FontAwesome'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.eot?v=4.7.0') format('embedded-opentype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('/assets/app/fonts/font-awesome/4.7.0/fontawesome-webfont.svg?v=4.7.0#FontAwesome') format('svg');
font-style: normal;
font-weight: normal;
}
As you can see, the paths to the font files are root relative, and I am able to download the individual font files via those URLs directly, so I'm pretty sure this isn't a path issue.
In Chrome on OS X, I get squares. In Safari, I don't get any icons at all. I have combed through lots of articles with lots of people experiencing various issues similar to mine, but nothing has helped so far.
Even if I supply a specific loader for fonts:
{
test: /\.(eot|svg|ttf|woff(2)?)(\?v=\d+\.\d+\.\d+)?$/,
use: ['url']
}
it still doesn't work. On Windows 8.1/10 and Linux (Ubuntu / Mint), everything works as expected. What am I doing wrong?
I ended up using the CDN-based version of Font Awesome as self-hosting wasn't working in OS X or for Cordova builds of my app.
For some reason the fonts are the only assets that are loaded from the http://example.com domain instead of http://www.example.com, and because of this, are not displayed in Firefox because of CORS.
this is the less file that loads the fonts:
#font-face {
font-family: 'example';
src: asset-url('example.eot?97822167');
src: asset-url('example.eot?97822167#iefix') format('embedded-opentype'),
asset-url('example.woff?97822167') format('woff'),
asset-url('example.ttf?97822167') format('truetype'),
asset-url('example.svg?97822167#example') format('svg');
font-weight: normal;
font-style: normal;
}
Firefox says:
downloadable font: download failed (font-family: "example" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed
source: http://example.com/assets/example-c93f82c639ee9474376d8df30300127a.ttf?97822167
The asset host is set to www.example.com. why is the domain wrong? how can i change this?
Thank you
Make sure your fonts are placed in either app/assets/fonts vendor/assets/fonts or lib/assets/fonts since you're using Rails 4
Make sure your assets are precompiled, i'm not sure if rails pipeline precompiles .svg .woff etc.. by default.
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/
Edit:
Also, make sure Rails serves static assets config.serve_static_assets = true
changed
asset-url
to
asset_url
in the .less file and all was well
I installed a bootstrap theme and everything is working well locally. However, when I went to push to heroku, my app couldn't find the fonts. I precompiled the assets and pushed to heroku, but no icons.
So, I made my development environment like heroku with the following in development.rb:
config.assets.debug = true
# Disable Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = true
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
# config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = false
# Generate digests for assets URLs.
config.assets.digest = true
now, my dev environment can't find the font files. The font files are in two locations:
app/assets/fonts/fontawesome-webfont.*
public/assets/fontawesome-webfont.*
however, I get this error:
ActionController::RoutingError (No route matches [GET] "/assets/fontawesome-webfont.svg"):
here's how they are being loaded from the precomplied css file (application-xxxxxxxxx.css):
#font-face {
font-family: 'FontAwesome';
src: url('fontawesome-webfont.eot?v=4.0.3');
src: url('fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
what am I doing wrong?
The easiest fix for me was to use the CDN described on the Font Awesome "get started" page.
Delete any local copy of the stylesheet and font files, and just put this in the head:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
(current as of 07-07-2014, see link above for most recent release)
Keep the development environment as it was. We need to precompile assets in production mode only.
Here, I hope you need to add:
Application.rb
# Enable the asset pipeline
config.assets.enabled = true
config.assets.paths << "#{Rails.root}/app/assets/fonts"
and update:
#font-face {
font-family: 'FontAwesome';
src: url('/assets/fontawesome-webfont.eot?v=4.0.3');
src: url('/assets/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),
url('/assets/fontawesome-webfont.woff?v=4.0.3') format('woff'),
url('/assets/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),
url('/assets/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
Then run rake assets:precompile and push it to heroku. May that would go well.
I tried using asset-url instead of url putting appropriate files in assets/fonts and it worked:
#font-face{
font-family: 'Font-Awesome';
src: asset-url('font-awesome.eot');
src: asset-url('font-awesome.eot?#iefix') format('embedded-opentype'),
asset-url('font-awesome.svg') format('svg'),
asset-url('font-awesome.woff') format('woff');
font-weight: normal;
font-style: normal;
}
I simply cleaned up my public/assets folder and precompiled the assets again. Pushed to heroku and et voila! It worked liked a charm. There were a lot of repetitive files and the assets weren't updated. Hence had to clean up. I tried this when none of the above methods seemed to work for me.
Note: I'm on,
Rails - 4.1.6
Ruby - 2.1.3
font-awesome-rails - 4.2.0.0
Hope it helps anybody who comes looking for the right fix!
I had the exact same issue with Rails 4.2 and Font Awesome gem 'font-awesome-rails'.
I had to use asset-path (since I'm using sass, but I presume asset-url works too) in your #font-face declaration.
Make sure that you compile for production and not development or some other environment:
RAILS_ENV=production bundle exec rake assets:precompile
Here's the resources that helped me:
http://anotheruiguy.roughdraft.io/7379570-custom-web-fonts-and-the-rails-asset-pipeline
https://github.com/concerto/concerto/issues/518 (The comment by augustf)
Perhaps you need to add.
config.assets.precompile += %w( .svg .eot .woff .ttf )
(from http://www.jaynathan.org/2013/02/using-font-awesome-with-rails-asset-pipeline/)
Do following changes
#font-face{
font-family:'FontAwesome';
src:font_url('font/fontawesome-webfont.eot?v=3.0.1');
src:font_url('font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
font_url('font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
font_url('font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight:normal;
font-style:normal
}
it work for me
Here's the CSS block where I load CSS fonts:
#font-face {
font-family: 'HelveticaNeueRegular';
src: url('../fonts/helveticaneue/helveticaneue-roman.eot');
src: url('../fonts/helveticaneue/helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
url('../fonts/helveticaneue/helveticaneue-roman.woff') format('woff'),
url('../fonts/helveticaneue/helveticaneue-roman.ttf') format('truetype'),
url('../fonts/helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
The fonts are located in /app/assets/fonts directory.
On the localhost, when I load the page, the fonts are not loaded, but on Heroku are all fonts loaded correctly.
What is wrong?
The reason you are seeing this, is that in a production environment all the assets are compiled and put into a single folder /assets/asset-name. With that said, both css and type faces are in the same folder, and can be accessed via the relative path. In a development environment, assets are not compiled and can be accessed at /assets/asset-type/asset-name, which means that the CSS and type faces won't be in the same folder.
To overcome this obstacle, Rails has an amazing helper called asset-url.
So for your example:
#font-face {
font-family: 'HelveticaNeueRegular';
src: asset-url('helveticaneue-roman.eot');
src: asset-url('helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
asset-url('helveticaneue/helveticaneue-roman.woff') format('woff'),
asset-url('helveticaneue/helveticaneue-roman.ttf') format('truetype'),
asset-url('helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
Plus, since you added a fonts folder under assets, you will need to add this to your asset path: config.assets.paths << "#{Rails.root}/app/assets/fonts" in the config/application.rb
This has to do with the way the asset pipeline works:
In development environment, all assets are serverd dynamically from /app/assets/....
In production environment, assets are compiled and moved to /public/assets/ from where a web server can pickup the now static files.
I suspect the paths in your fonts.css (accidently?) point to the files in production environment.
To solve your situation, you basically have two options:
move the font files into your /public directory (e.g. /public/fonts) and reference the files from there:
#font-face {
font-family: 'HelveticaNeueRegular';
src: url('/fonts/helveticaneue/helveticaneue-roman.eot');
src: url('/fonts/helveticaneue/helveticaneue-roman.eot?#iefix') format('embedded-opentype'),
url('/fonts/helveticaneue/helveticaneue-roman.woff') format('woff'),
url('/fonts/helveticaneue/helveticaneue-roman.ttf') format('truetype'),
url('/fonts/helveticaneue/helveticaneue-roman.svg#helvetica_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
Use Rails' Asset helpers. A good introduction can be found here.
I finally figured out this issue - into config/application.rb add following:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w( .svg .eot .woff .ttf )