CODEWITHSUNDEEP
cssionic2
Guillaume
Guillaume

Reputation: 3051

Include 3rd party css in ionic2

How to include a 3rd party css in ionic2? I guess it is probably linked to webpack config but I can't find any example anywhere, does someone know? for example, adding font-awesome css file after npm install font-awesome

Upvotes: 2

Views: 2886

Answers (3)

rfornal
rfornal

Reputation: 5122

ionic.config.js has been deprecated.

The correct answer is now:

npm install font-awesome Then edit your gulpfile.js to add options to the sass and fonts tasks:

gulp.task('sass', function(){
  return buildSass({
    sassOptions: {
      includePaths: [
        'node_modules/ionic-angular',
        'node_modules/ionicons/dist/scss',
        'node_modules/font-awesome/scss'
      ]
    }
  });
});

gulp.task('fonts', function(){
  return copyFonts({
    src: [
      'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
      'node_modules/font-awesome/fonts/**/*.+(eot|ttf|woff|woff2|svg)'
    ]
  });
});

You can find more information on the gulp tasks here: https://github.com/driftyco/ionic-gulp-tasks.

Then you should be able to @import "font-awesome" in your app/theme/app.core.scss file and use it in your project wherever.

Upvotes: 3

Guillaume
Guillaume

Reputation: 3051

For those who are interested in this, you can just add the files in the build process in the ionic.config.js like:

module.exports = {
    ...
    sass: {
        src: [
          'app/theme/app.+(ios|md).scss',
          'node_modules/font-awesome/scss/font-awesome.scss'
        ],
        dest: 'www/build/css',
        include: [
          'node_modules/ionic-framework',
          'node_modules/ionicons/dist/scss',
          'node_modules/font-awesome/scss'
        ]
      },
      fonts: {
          src: [
            'node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)',
            'node_modules/font-awesome/fonts/*.+(ttf|woff|woff2)'
          ],
          dest: 'www/build/fonts'
      }
      ...
}

This will compile font-awesome.css under www/build/css and fonts under www/build/fonts

Upvotes: 3

Denko Mancheski
Denko Mancheski

Reputation: 2719

You can normally put css files in the index.html page and just use the css classes wherever you want. By default, your components are not completely isolated from the outside world so you should be able to use lets say bootstrap without any problems

Upvotes: 1

Related Questions