Using font-awesome sass in ionic app

Ionic Framework ionic-v3
1

Hi,

I’m trying to use font-awesome inside my project. I’ve added the sass files to a folder and imported font-awesome.scss to into the app.scss. Then as per the instructions i’ve changed the font path variable in _variable.scss to point to the correct fonts. This all works fine when running ionic serve and looking at the app in a browser, but when building it to ios it does not show the font. When inspecting the device in safari it throws errors not being able to find the font files but when i look at the corresponding folders it seems the are all there.

Anyone have any idea ?

With best regards,
Robin

2

Not sure which instructions you are referring to, but this is what I do and it works for me (on device as well). If there is a simpler way, happy to know about it.

  1. You need a custom copy config file, so modify your package.json to have this
"config": {
        "ionic_copy": "./config/copy.config.js"
    },

Where config/copy.config.js is basically a copy of node_modules/@ionic/app-scripts/config/copy.config.js

  1. Edit your config/copy.config.js to add directives to copy over font awesome css and font files
copyFontawesomeFonts: {
    src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
    dest: '{{WWW}}/assets/fonts'
  },
  copyFontawesomeCss: {
    src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
    dest: '{{WWW}}/assets/css'
  },
  1. Edit src/index.html to add font- awesome css (that gets copied over when you serve/build thanks to your custom config above)
 <link href="assets/css/font-awesome.min.css" rel="stylesheet"/>
  1. Use your fa classes in your templates like so:
   <i class="fa fa-user-md fa-2x"></i>
4 Likes
3

Oh sorry, you said “sass” - I gave an example of how to use the css/font files. No idea how to incorporate FA scss

4

Thats fine, i tried this solution before but could not get the copy.config.js to work.

So now i tried just downloading font-awesome which contains the css version, sass version and less version. Since ionic uses sass i thought it would be simple to implement which it was, but it cannot find the font on the device for some reason

5

Followed a similar instruction before but it did not work, but following this it did :smiley: . On a side note, this requires font-awesome to be installed via npm using the command: npm install font-awesome

1 Like
6

@pliablepixels Thanks, that did the trick. To avoid future problems with changes done to the original copy.config.js, you can make the file as shown below:

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/copy.config.js');

module.exports = function () {
	useDefaultConfig.copyFontawesomeFonts = {
		src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'],
		dest: '{{WWW}}/assets/fonts'
	};
	
	useDefaultConfig.copyFontawesomeCss = {
		src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'],
		dest: '{{WWW}}/assets/css'
	};

	return useDefaultConfig;
};
3 Likes
7

nice! thanks @lucasbasquerotto

8

Thanks for your solution @pliablepixels, it works perfectly for me !

9

It works for me!
Thanks a lot