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. :)
Related
So after doing npm install material-design-icons, how do I use them in my React application?
The methods included here doesn't include the npm method.
This is the way you can reference it (in your styles.css):
#import '~material-design-icons/iconfont/material-icons.css';
To use it:
<i class="material-icons">cloud_upload</i>
Open angular.json in your project, and add the following line node_modules/material-design-icons/iconfont/material-icons.css under projects => YOUR_APP => architect => options => styles
My angular version ng version:
Angular CLI: 8.0.3
Node: 11.15.0
OS: linux x64
Angular: 8.0.1
Use this in index.html file after npm install material-design-icons .
It works in my Angular Project.
<link href="../node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">
Using npm & laravel-mix you can do this:
// Material Design Icons - File: sass/app.scss
#import '~material-design-icons/iconfont/material-icons.css';
cmd:
npm run dev
html:
<i class="material-icons"> list </i>
You can use Material-UI which provides two components to render system icons: SvgIcon for rendering SVG paths, and Icon for rendering font icons.
If you are not already using Material-UI in your project, you can add it with:
// with npm
npm install #material-ui/core
// with yarn
yarn add #material-ui/core
SVG Material icons:
Material-UI provides a separate npm package, #material-ui/icons, that includes the 1,000+ official Material icons converted to SvgIcon components
1. Installation:
// with npm
npm install #material-ui/icons
// with yarn
yarn add #material-ui/icons
2. Import the icons:
import AccessAlarmIcon from '#material-ui/icons/AccessAlarm';
import ThreeDRotation from '#material-ui/icons/ThreeDRotation';
3. Usage:
You can use material.io/tools/icons to find a specific icon. When importing an icon, keep in mind that the names of the icons are PascalCase, for instance:
delete is exposed as #material-ui/icons/Delete
delete forever is exposed as #material-ui/icons/DeleteForever
For themed icons, append the theme name to the icon name. For instance with the
The Outlined delete icon is exposed as #material-ui/icons/DeleteOutlined
The Rounded delete icon is exposed as #material-ui/icons/DeleteRounded
The Two Tone delete icon is exposed as #material-ui/icons/DeleteTwoTone
The Sharp delete icon is exposed as #material-ui/icons/DeleteSharp
There are three exceptions to this rule:
3d_rotation is exposed as #material-ui/icons/ThreeDRotation
4k is exposed as #material-ui/icons/FourK
360 is exposed as #material-ui/icons/ThreeSixty
Font Material icons:
1. Include Material icon font in your project, via Google Web Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
2. Import Icon component:
import Icon from '#material-ui/core/Icon';
3. wrap the icon name with the Icon component, for example:
<Icon>star</Icon>
more info here
I made a copy of the "node_modules/material-design-icons/iconfont/material-icons.css", changed the urls in the file and then imported that copied file in my main stylesheet.
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('~material-design-icons/iconfont/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
url('~material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
url('~material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
}
That worked for me with laravel 8 & npm:
//terminal:
npm install material-design-icons
Then in your webpack.mix.js add
.postCss('node_modules/material-design-icons/iconfont/material-icons.css', 'public/css')
so it would look more-less like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.postCss('node_modules/material-design-icons/iconfont/material-icons.css', 'public/css')
.sourceMaps();
Next
//terminal
npm run dev
Because of that you will get material-icons.css file in your public folder so now, all you have to do is to include it in your html.
<link href="{{ asset('css/material-icons.css') }}" rel="stylesheet">
I have looked at several stackoverflow posts and github issues, but can't find something that is working for me.
I have a custom font that I'm using for icons that I'm installing via npm. These are the files in my folder a-icons in node_modules:
a-icon.css
a-icon.eot,
a-icon.ttf,
a-icon.woff,
a-icon.svg
In my main stylesheet I've added:
#import '~a-icons/a-icon';
#font-face {
font-family: 'a-icon';
src: url('../../../node_modules/a-icons/a-icon.eot');
src:
url('../../../node_modules/a-icons/a-icon.ttf') format('truetype'),
url('../../../node_modules/a-icons/a-icon.woff') format('woff'),
url('../../../node_modules/a-icons/a-icon.svg') format('svg');
}
#import '~a-icons/a-icon' is specifically giving me an error saying that it can't find the .eot, .ttf, .woff, .svg
This is one of the errors:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss
Module not found: Error: Can't resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets/a-icon.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js doesn't exist
as directory
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss 6:76081-76109
# ./src/assets/stylesheets/global-styles.scss
# multi ./src/assets/stylesheets/global-styles.scss ./node_modules/normalize.css/normalize.css
I'm using scss, but the font is in vanilla css.
I've also tried #import '../../../node_modules/a-icons/a-icon.css'; The icons show up as a square and I think that's because the font-family isn't recognized. So I added #font-face, but that it doesn't do anything.
I also tried changing angular-cli.json to include it in the assets and style:
"assets": [
"assets",
"assets/languages",
"assets/stylesheets",
"favicon.ico",
"environments/environment.values.js",
{
"glob": "a-icon.*",
"input": "../node_modules/a-icons",
"output": "./assets/a-icons"
}
"styles": [
"assets/stylesheets/global-styles.scss",
"../node_modules/normalize.css/normalize.css",
"../node_modules/a-icons/a-icon.css"
]
This doesn't do anything.
First, I advise you to create a single css file "fonts.css" in your node module, it will be simple to include a css file in your application rather than redefine the fonts and refer to N files (woff2, eot...ect), for example:
Your fonts.css:
#font-face {
font-family: 'a-icon';
src: url('a-icon.eot');
src:
url('a-icon.ttf') format('truetype'),
url('a-icon.woff') format('woff'),
url('a-icon.svg') format('svg');
}
Second, include the file "fonts.css" in your styles.css of your angular application as follows:
#import "~a-icons/fonts.css";
I have a similar solution that works fine, my node module contains a theme with fonts.
Why did you refer To a node module to get icons? The font is related to the theme of your application so it should be within your assets folder and then simply add: import the-name-font in your main stylesheet.
If you need to import external css files from node_modules, add their links in angular cli config file To import them in the assets folder and then import them in your main stylesheet from assets folder
Hope my response can help you
i am using foundation zerb for Email and i want to use Foundation icons in my Project. I am new in scss and i tried to follow the instructions from the following site but i dont get it runing properly.
I created a font folder in my root directory (outside src) and i added the following code as discribed in my app.scss file:
enter code here
$font-path: "../fonts/foundation-icons/foundation-icons";
#font-face {
font-family: "foundation-icons";
src: url("#{$font-path}.eot");
src: url("#{$font-path}.eot?#iefix") format("embedded-opentype"),
url("#{$font-path}.woff") format("woff"),
url("#{$font-path}.ttf") format("truetype"),
url("#{$font-path}.svg#fontcustom") format("svg");
font-weight: normal;
font-style: normal;
}
#import "../fonts/foundation-icons/foundation-icons.css";
In my Page i added for testing one icon but it didn't render the icon.
<i class="fi-social-linkedin">linkedIn</i>
When i run the command npm run build i get the following error from the task runner gulp:
Unhandled rejection Error: ENOENT: no such file or directory, open 'C:\Users\aro\aro_dev\emailfound\dist\font\foundation-icons\foundation-icons.css'
at Error (native)
[00:11:11] The following tasks did not complete: default, build, inline
[00:11:11] Did you forget to signal async completion?
Can someone help me?
Best Regards
Aro
By default the scss version of foundation-email do not include icon fonts , as icon fonts are not supported in most of email clients.
But if you have added your own icon fonts, or imported the foundation fonts from foundation-sites change your $font-path: variable to point to the correct path of fonts relative to you css file.
Instead of using icon fonts use png or jpg images for your icons.
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 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'}
]
}