CODEWITHSUNDEEP
cssember.jssassfont-awesomegoogle-font-api
Michael Lynch
Michael Lynch

Reputation: 3149

How can I import external CSS files into my Ember app?

I am trying to import Font Awesome and Google Fonts into my Ember app but they aren't working. None of the styles are being applied.

I am using ember-cli-sass. Am I not able to import a stylesheet from a CDN? Does it not compile .css files? I tried looking for a .scss file for Font Awesome on a CDN but I couldn't find any, and I don't think Google offers .scss files at all.

app.js

import 'fonts.scss'

fonts.scss

@import '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
@import '//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300';

When I add <i class="fa fa-user"></i> to my template, none of the Font Awesome styles are applied. Why aren't the stylesheets being imported?

Upvotes: 2

Views: 2716

Answers (2)

RustyToms
RustyToms

Reputation: 7810

There are two main ways to do this. If you don't mind fetching it from the internet, you can add them as links in your <head> tag in index.html.

<link rel="stylesheet" href="maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300" rel="stylesheet">

Or you can download the files and include them in your scss build. This gives you more freedom to customize them. You might want to do this to minimize the number of API calls your app requires in order to load, as you've heard that will make your app load faster. But consider that if the fonts you are loading are popular (and these two are) then your user may already have them cached, making them blazingly fast.

If you want to download the files into your build here is what you do. Keep in mind that CSS is valid SCSS, so if you can get a CSS file you can always just rename it .scss and include it in your build. But you can't import a file from the internet in your scss. Your scss gets parsed and compiled into CSS before your app even gets served. The files need to be available from your project folders.

Font Awesome

For FontAwesome 4.7 you can get the sass files and include it in your project pretty easily. Go to http://fontawesome.io/ , click the "Download" button, download the files. You need two folders, the "scss" folder and the "fonts" folder. Add those two folders to your project. Open the scss/_variables.scss file and change the @fa-font-path to be the path to the font directory. Include the font-awesome.scss file in your scss. You can also find the instructions at http://fontawesome.io/get-started/

enter image description here

If you want to start to get fancy you can then edit the files to only include the icons you want. There are several ways to do this, but I won't get into that here. It's licensed under the MIT license, so you should be able to do this legally.

Google Fonts

Open a browser and paste http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300 into the url. You will actually get the css file. Copy and paste into a .scss file and include it in your build. With Google Fonts each font has its own license. Open Sans is covered by the Apache 2.0 license, so you can do this.

Upvotes: 2

myartsev
myartsev

Reputation: 1232

There is no support in SASS for importing a CSS file

If you are using Ember, the best way would be to either download the CSS into the vendors folder and added to ember-cli-build.js.

Alternatively, if you want to use the CDN, you can add the CSS to the index.html in Ember.

Upvotes: 0

Related Questions