I created a mobile application with the yeoman mobile-generator.
Now I want to add font awesome. I tried this, but not really works in the compiling process. A small advice or experience would be great
Okay, it's really a bit unclear. Sorry.
The compiling process works, but console says 404 not founds for the fonts.
It's not really clear to me how is a good way to do this. Creating the CSS from the scss files, implemeted the .min.css in the index.html with "<-- build: ... -->" or something else?!
When I add this in my main .scss file the the fonts would not be found.
$fontAwesomePath: "../bower_components/font-awesome/fonts";
#import '../bower_components/font-awesome/scss/font-awesome.scss';
Grunt copies and renames the font files f.e. to:
5a6b8fb8.FontAwesome
Sounds like grunt rev https://github.com/cbas/grunt-rev is renaming your font file. Just look for something like this in your Gruntfile:
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/styles/fonts/*'
...
remove the fonts line and you should be okay.
Ok,
seems I could fixed this with the help of this answer.
Installed font awesome with bower:
bower install --save font-awesome
Then simply this line in the index.html fixed my problem.
<!-- build:css styles/vendor/fontawesome.css -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- endbuild -->
Thanks #OddEssay and #bpaul for our help!!
#importing the scss takes care of the CSS side of things, but I think you also need to move the assests to a location the browser can access them, so grunt-contrib-copy would do the job perfectly. So if your webroot is public Something like:
copy: {
main: {
files: [
{expand: true, cwd: '../bower_components/font-awesome/fonts', src: ['*.*'], dest: 'public/fonts'}
]
}
Related
How can i use fontawesome with ionic 2, i've following this tutorial but it's not working.
Update in ionic 2 RC.0
Download the font-awesome library.
Create "fonts" folder in src/assets and copy the fonts from the font-awesome/fonts folder
Copy the scss folder and paste it under src/theme/scss
Open the variables.scss file, and copy the below code
#import "scss/font-awesome"; #font-face
{ font-family: 'FontAwesome'; src:
url('../assets/fonts/fontawesome-webfont.eot?v=#{$fa-version}');
src:
url('../assets/fonts/fontawesome-webfont.eot?#iefix&v=#{$fa-version}')
format('embedded-opentype'),
url('../assets/fonts/fontawesome-webfont.woff2?v=#{$fa-version}')
format('woff2'),
url('../assets/fonts/fontawesome-webfont.woff?v=#{$fa-version}')
format('woff'),
url('../assets/fonts/fontawesome-webfont.ttf?v=#{$fa-version}')
format('truetype'),
url('../assets/fonts/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular')
format('svg'); font-weight: normal; font-style: normal; }
To include your icon in HTML
<i primary class="fa fa-cart-plus fa-lg"></i>
Ionic Beta
Install fontAwesome from the npm library.
Modify the below changes to your gulpfile.ts.
Include gulp task for adding icon css and fonts to your build
gulp.task('myCss', function(){
return gulp.src('path-to-your-font-lib/style.css')
.pipe(gulp.dest('www/build/css'))
});
gulp.task('myFonts', function(){
return gulp.src('path-to-your-font-lib/fonts/**/*.+(eot|svg|ttf|woff)')
.pipe(gulp.dest('www/build/fonts'))
});
Modify your gulp build and watch task as follows (Adding your font
and css on watch and build)
gulp.task('watch', ['clean'], function(done){
//existing ionic2 code
}
gulp.task('build', ['clean','myCss','myFonts'], function(done){
//existing ionic2 code
}
Include #import "../../node_modules/font-awesome/scss/font-awesome"; in app.core.scss file
To include your icon in HTML
<i primary class="fa fa-cart-plus fa-lg"></i>
font-awesome ionic 2 integration only with configuration files.
Download font-awesome via npm (npm install font-awesome --save)
In the file package.json from your project add this:
"config": {
"ionic_bundler": "webpack",
"ionic_source_map": "source-map",
"ionic_copy": "./config/copy.config.js",
"ionic_sass": "./config/sass.config.js"
}
On the root folder of your project create config folder and copy the files copy.config.js and sass.config.js (this files are located in (..\node_modules\#ionic\app-scripts\config)
Modify the copied files. In sass.config.js add the reference to font-awesome,
at the end verify that you have something like this
includePaths: [
'node_modules/ionic-angular/themes',
'node_modules/ionicons/dist/scss',
'node_modules/ionic-angular/fonts',
'node_modules/font-awesome/scss'
],
The most important part here is the last line.
in copy.config add this:
copyFontAwesome:{
src: 'node_modules/font-awesome/fonts/',
dest: '{{WWW}}/fonts/'
}
The most important part here is dest '{{WWW}}/fonts/' and not {{WWW}}/assets/fonts/', it because font-awesome.css search fonts in "www/fonts" file.
And finally add #import "font-awesome"; in variables.css (src\theme folder)
After perform all this steps you can use font-awesome in your ionic 2 project.
<i class="fa fa-circle" style="color:#14afef; font-size: small"></i>
It's all
Similar Approach as #Edward suggested, but a bit cleaner way to do this would be
1) npm install font-awesome --save
2) In package.json, add
"ionic_copy": "./config/copy.config.js",
"ionic_sass": "./config/sass.config.js",
3) Create the below files at root level of your project and add following content.
In the file: ./config/copy.config.js
Add
const copyConfig = require('../node_modules/#ionic/app-scripts/config/copy.config');
copyConfig.copyFonts.src.push('{{ROOT}}/node_modules/font-awesome/fonts/**/*');
In the file: ./config/sass.config.js
Add
const sassConfig = require('../node_modules/#ionic/app-scripts/config/sass.config');
sassConfig.includePaths.push('node_modules/font-awesome/scss');
4) In ./src/theme/variables.scss
$fa-font-path: "../assets/fonts";
#import 'font-awesome';
There is still a lot of confusion on what is a best practice when it comes to adding FontAwesome to an ionic2 app. I wrote a tutorial about it to mitigate some of that confusion. I hope this helps anybody else out there looking for this info
http://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html
I tried most of the answers above but they were either too complicated or had a limitation when the core of Ionic2 was upgraded so here is my solution:
It requires manually upgrading of FA when a new version comes out but I don't need to upgrade often as I only use a few select icons.
Ignore the SASS files and copy the contents of \node_modules\font-awesome\fonts to \src\assets\fonts. Also copy \node_modules\font-awesome\css\font-awesome.min.css to the same place.
Reference the csss in your index.html file like this:
<!--Custom Fonts-->
<link href="assets/fonts/comfortaa/comfortaa.css" rel="stylesheet" />
<link href="assets/fonts/gloriahallelujah/gloriahallelujah.css" rel="stylesheet" />
<link href="assets/fonts/font-awesome.min.css" rel="stylesheet" />
Then to use it, put this into the page's scss:
.logo-text {
font-family: 'comfortaa-bold';
}
and this in the html:
<h4 class="white-text slogan-text">Come bien a la mitad de precio</h4>
And that should be it...
Update for Ionic 2, Ionic 3+: just one step:
Add font-awesome link to your index.html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
I have a ngBoilerplate project, I would like to add Font Awesome to it.
I have installed Font Awesome with:
bower install font-awesome --save-dev
I then added the following to the build.config.js file:
css: [
'vendor/font-awesome/css/font-awesome.min.css'
],
assets: [
'vendor/font-awesome/fonts/*'
]
And I added the following to my src/less/variables.less file:
#fa-font-path: "../assets";
Now I would like to add a simple home icon to my site with:
<i class="fa fa-home"></i>
Instead now I get a ␦ (ascii, blank square) where the icon should be.
The Font Awesome CDN works fine but cant get it to work with bower.
So for some reason I get an intermittent error that the font files cant be found.
I amended the build.config.js and removed 'vendor/font-awesome/fonts/*'.
Then I configured Gruntfile.js to copy the fonts to the folder that error was looking for. I did this by adding the following to the copy section:
font_awesome_fonts: {
files:{
expand: true,
flatten: true,
src: 'vendor/font-awesome/fonts/*',
dest: '<%= build_dir %>/vendor/fonts'
}
}
And added the following to the delta.assets section:
'copy:font_awesome_fonts'
This seemed to work but now I get the following warning messages in console, no idea why, at least it works now:
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.woff2?v=4.3.0
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.woff?v=4.3.0
localhost/:1 Failed to decode downloaded font: http://localhost:14080/fonts/fontawesome-webfont.ttf?v=4.3.0
Thanks for your question; it got me on the path to this answer.
What worked for me was using the Font Awesome LESS file instead of the CSS. In src/less/main.less I added the following:
#import '../../vendor/font-awesome/less/font-awesome.less';
I made this declaration in my src/less/variables.less:
#fa-font-path: ".";
I also removed any mention of the font awesome from the vendor css section of build.config.js. My font declaration looks a bit different, but should be effectively the same:
vendor_files: [
js: ...,
css: [
],
assets: [
'vendor/font-awesome/fonts/*.otf',
'vendor/font-awesome/fonts/*.eot',
'vendor/font-awesome/fonts/*.svg',
'vendor/font-awesome/fonts/*.ttf',
'vendor/font-awesome/fonts/*.woff'
]
]
I haven't noticed your issue with the fonts not copying, nor have I seen the messages in the console, but the icons show up correctly when hosting the files in a webserver and browsing to my app.
The already answered questions on this issue didn't solve my problem.
When I pull in the Font Awesome library with Bower and integrate the library directly in index.html or alternatively use the hosted version like in the following, the icons are displaying fine:
<link href="bower_components/fontawesome/css/font-awesome.css" rel="stylesheet" />
or
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
However, no icons are displayed when I am compiling font-awesome.less or font-awesome.css with Grunt (Please see the picture: The Bootstrap LESS which I import in base.less works fine!):
frontend.less:
#import "base.less";
#import "/bower_components/fontawesome/less/font-awesome.less";
//#import (less)"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
Gruntfile.js (excerpt):
less: {
development: {
options: {
compress: true, // Minification
},
files: {
// Compile frontend.less into frontend.css
"./public/assets/css/frontend.min.css":"./app/assets/less/frontend.less",
// Compile backend.less into backend.css
"./public/assets/css/backend.min.css":"./app/assets/less/backend.less",
}
}
},
I would appreciate your advise how to import / compile font-awesome.less correctly with Grunt or if this is a Font Awesome bug.
According your Grundfile.js you will create the ./public/assets/css/frontend.min.css file for your compiled css. You should set #fa-font-path relative to that file. Because of "http://localhost/testing/bower_components/bootstrap/fonts/" works in your situation also #icon-font-path: "testing/bower_components/bootstrap/fonts/".
In you frontend.less:
#import "base.less";
#import "/bower_components/fontawesome/less/font-awesome.less";
#icon-font-path: "testing/bower_components/bootstrap/fonts/";
Alternatively copy the font files from /bower_components/bootstrap/fonts/ to /public/assets/fonts and set #icon-font-path: "../fonts" (the default already defined in "/bower_components/fontawesome/less/variables.less).
Notice that v4.2 of Font Awesome also allows you to set:
#fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts"; // for referencing Bootstrap CDN font files directly
I'd like to have my stylus file accept variable input from grunt, loop the variable values, and output different themed css files.
Then I could easily switch themes like this. https://stackoverflow.com/a/7847009/55124
Is this possible? How would one set it up?
Right now I have grunt compiling stylus into my css. But, to generate a different theme, I have to manually change the value of my themeName variable in my mainCSS.stylus file and rebuild with grunt.
What do you think about this way:
There is a main.styl, that contains:
#import "variables";
//some other styles and imports
and there are some themes files:
themes/default.styl
themes/pretty-theme.styl
themes/very-pretty-theme.styl
using grunt-contrib-copy you can copy the file themes/default.styl to the variables.styl and compile stylus to the css styles, than you delete variables.styl and again copy themes/pretty-theme.styl to the variables.styl and compile and so on.
copy: {
default-theme: {
src: 'themes/default.styl',
dest: 'variables.styl',
},
pretty-theme: {
src: 'themes/pretty-theme.styl',
dest: 'variables.styl',
},
very-theme: {
src: 'themes/very-pretty-theme',
dest: 'variables.styl',
},
}
I have a rails app I'd like to use these in. Following the instructions, I ensured the font path in .css was assets/fonts/ionicons... but it doesn't seem to be working. Anyone ever use these before?
If anyone else has trouble to use ionicons in your rails projects, I suggest to use the gem font-ionicons-rails that I built.
It's very simple to use, as below:
Installation:
Add this to your Gemfile:
gem "font-ionicons-rails"
Usage:
In your application.css, include the css file:
/*
*= require ionicons
*/
Sass Support
If you prefer SCSS, add this to your application.css.scss file:
#import "ionicons";
If you use the Sass indented syntax, add this to your application.css.sass file:
#import ionicons
Then restart your webserver if it was previously running.
That's all. Now you are ready to use ionicons in your project using the tag i or using the gem helper to improve use.
Helpers
ion_icon "camera"
# => <i class="ion-camera"></i>
ion_icon "camera", text: "Take a photo"
# => <i class="ion-camera"></i> Take a photo
ion_icon "chevron-right", text: "Get started", right: true
# => Get started <i class="ion-chevron-right"></i>
content_tag(:li, ion_icon("checkmark-round", text: "Bulleted list item"))
# => <li><i class="ion-checkmark-round"></i> Bulleted list item</li>
It's pretty ease now, yay.
These are the steps I usually take:
Add the following to config/application.rb
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Make the directory app/assets/fonts and copy the font files to that directory.
Copy ionicons.css to app/assets/stylesheets
Edit ionicons.css file and update the url() calls to work with the asset pipeline:
src: font-url("ionicons.eot?v=1.3.0");
src: font-url("ionicons.eot?v=1.3.0#iefix") format("embedded-opentype"),
font-url("ionicons.ttf?v=1.3.0") format("truetype"),
font-url("ionicons.woff?v=1.3.0") format("woff"),
font-url("ionicons.svg?v=1.3.0#Ionicons") format("svg");
Restart webrick/thin/whatever and you should be good. :)