CODEWITHSUNDEEP
ember.jssassfont-awesomefont-awesome-5
Alexander Bösecke
Alexander Bösecke

Reputation: 83

Ember.js, FontAwesome & Sass

I have an Ember.js project where I use Fontawesome5 and Sass. Creating an icon is easy with <FaIcon @icon="..."/>. But now I want to use an icon from Fontawesome with Sass (more specifically with list-style). I guess I could use the way it is described in the fontawesome-sass-documentation, but this feels wrong in more than one way.

I tried to create a route get-icon, that I could use with list-style: url(...), but as far as I see that can't work with ember.js.

So is there a preferred way to get a fontawesome icon for list-style in an ember project?

Upvotes: 0

Views: 402

Answers (1)

jelhan
jelhan

Reputation: 6338

I assume that you are using the official font awesome library for Ember.js: @fortawesome/ember-fontawesome It provides the <FaIcon> component you mentioned.

@fortawesome/ember-fontawesome does not provide integration to use the SASS styles. There is an open feature request as an issue on its GitHub repository but it hasn't received any response yet.

I assume that you are using ember-cli-sass to integrate SASS in your build process. It's the de facto standard in Ember community as fa as I'm aware.

ember-cli-sass has an includePaths option, which allows to import SASS files from other folders than app/styles. You can use this option to inlcude the required SASS files in your build and import the required SASS files in your app/styles/app.scss.

ember-cli-sass documentation includes an example how to do so for foundation CSS framework. You can use that one as a starting point.

Upvotes: 1

Related Questions