The already answered questions on this issue didn't solve my problem.
When I pull in the Font Awesome library with Bower and integrate the library directly in index.html or alternatively use the hosted version like in the following, the icons are displaying fine:
<link href="bower_components/fontawesome/css/font-awesome.css" rel="stylesheet" />
or
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
However, no icons are displayed when I am compiling font-awesome.less or font-awesome.css with Grunt (Please see the picture: The Bootstrap LESS which I import in base.less works fine!):
frontend.less:
#import "base.less";
#import "/bower_components/fontawesome/less/font-awesome.less";
//#import (less)"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
Gruntfile.js (excerpt):
less: {
development: {
options: {
compress: true, // Minification
},
files: {
// Compile frontend.less into frontend.css
"./public/assets/css/frontend.min.css":"./app/assets/less/frontend.less",
// Compile backend.less into backend.css
"./public/assets/css/backend.min.css":"./app/assets/less/backend.less",
}
}
},
I would appreciate your advise how to import / compile font-awesome.less correctly with Grunt or if this is a Font Awesome bug.
According your Grundfile.js you will create the ./public/assets/css/frontend.min.css file for your compiled css. You should set #fa-font-path relative to that file. Because of "http://localhost/testing/bower_components/bootstrap/fonts/" works in your situation also #icon-font-path: "testing/bower_components/bootstrap/fonts/".
In you frontend.less:
#import "base.less";
#import "/bower_components/fontawesome/less/font-awesome.less";
#icon-font-path: "testing/bower_components/bootstrap/fonts/";
Alternatively copy the font files from /bower_components/bootstrap/fonts/ to /public/assets/fonts and set #icon-font-path: "../fonts" (the default already defined in "/bower_components/fontawesome/less/variables.less).
Notice that v4.2 of Font Awesome also allows you to set:
#fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts"; // for referencing Bootstrap CDN font files directly
Related
I'm learning sass, and using the live sass compiler extension in vs code. I'm also using the live server extension to view it in the browser. I have a main scss file which compiles fine every time I save the file and shows the updated code in the live browser. However, when I modify the partial files (_vaiables.scss for example), the browser reloads with no css, just the html; then, I need to re-save main.scss so I can see those changes in _variables.scss. Is that how it usually works? It is kind of annoying having to save two different files to see changes on the screen. I'm pretty sure there is a better way.
Here is my main.scss
#import "abstracts/functions";
#import "abstracts/mixins";
#import "abstracts/variables";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/button";
#import "components/composition";
#import "components/feature-box";
#import "components/card";
#import "layout/header";
#import "layout/grid";
#import "pages/home"
Here is some of the settings.json file for live sass compiler extension.
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": "/advanced-css-course/Natours/starter/css/sass-compiler"
}
],
Here is the link to css in html
<head>
<link rel="stylesheet" href="css/sass-compiler/main.css" />
</head>
Thanks in advance.
I ended up installing node-sass to compile the code
I'm french, sorry for my english, I have a problem with Jekyll
I installed gems: jekyll, jekyll-sass-converter
But Jekyll dont convers styles.scss to styles.css
I declared the styles on _includes/head.html:
<!-- CSS -->
<link rel="stylesheet" href="{{ site.baseurl }}css/styles.css">
Assets was declared on _config.yml:
sass:
sass_dir: _lib
style: compressed
styles.scss output
// Imports
#import "base";
#import "main";
_lib folder output
/base.scss
/main.scss
Github Project: https://github.com/micaelandre/micaelandre.github.io
Github Issue: https://github.com/micaelandre/micaelandre.github.io/issues/1
Website: https://micaelandre.github.io
Jekyll only convert sass files if the .scss starts with two lines of triple dashes, so in css/styles.scss:
---
---
// Imports
#import "base";
This will generate: css/styles.css.
Also note that you don't need to explicitely install the sass converter, as it is one of the jekyll gem dependency.
I'm trying to use font awesome v4.5.0 in my project. I'm compiling my CSS using LESS and I've got the following:
#import "bootstrap/bootstrap.less";
#import "minimal-devices/minimal-devices.less";
#import "angular-tour/angular-tour.less";
#import "font-awesome/font-awesome.less";
#import "my-fonts.less";
#import "my-base.less";
#import "my-media.less";
#import "sce-style.less";
I'm using GulpJS to create one large css file and this is in my gulpfile.js
gulp.task('less', function () {
gulp.src([DIRSOURCE + 'assets/less/sce.less'])
.pipe(less())
.pipe(minifyCSS())
.pipe(rename("style.css"))
.pipe(gulp.dest(DIRDEST + 'assets/css'));
});
When I load up my page I get this shown in the console:
Failed to decode downloaded font: http://localhost:8000/assets/fonts/fontawesome-webfont.woff2?v=4.5.0
(index):1 OTS parsing error: invalid version tag
I'm not sure what I'm doing wrong as In my project I have the directory font-awesome with the font-awesome.less file.
Anyone have any guidance on this?
Issue was linked to the path I had set to the font directory. I updated within variables.less on line 4 to #fa-font-path "../fonts"; or alternatively to avoid any of this hassle I could have uncommented line 7 and used the CDN below:
//#fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts"; // for referencing Bootstrap CDN font files directly
I'm trying to import a CSS stylesheet into a .sass file from a component. In this example, the component is bootstrap-select and the import looks like this:
#import 'bootstrap-select/bootstrap-select.css'
This builds successfully but the browser is unable to find the file, I receive the following error in the browser:
GET http://localhost:9000/styles/bootstrap-select/bootstrap-select.css 404 (Not Found)
Is there anything special I need to setup to have .css files included in builds?
In order to import the code of the file into your Sass file the imported file needs to have a .sass or .scss ending. If the file ends with .css the code will not be sucked in and it just is a normal CSS #import statement that creates an HTTP request.
Just copy the css file you want to import, change the file ending to .scss and #import that file. Sass will then suck in the code and replace the #import statement with it in your CSS file.
What Kahlil said; but I would propose using bootstrap-sass instead as it gives you a lot more flexibility when it comes to what you can/can't include. I'm using this in production and it's very good; you can completely tailor your build, including variables so that you can tweak the button colours, spacing and such. For example:
/*
|---------------------------------------------------------------------
| Only include the parts of Bootstrap that we are actually using.
|---------------------------------------------------------------------
*/
$navbar-margin-bottom: 0;
#import "../vendor/bootstrap-sass/lib/variables";
#import "../vendor/bootstrap-sass/lib/mixins";
#import "../vendor/bootstrap-sass/lib/normalize";
#import "../vendor/bootstrap-sass/lib/print";
#import "../vendor/bootstrap-sass/lib/scaffolding";
#import "../vendor/bootstrap-sass/lib/type";
// etc
Add it to your bower.json (bootstrap-sass) and use that instead.
There's a ruby gem which allows for the functionality described called sass-css-importer, which allows for the following syntax to be used to include files ending with .css from within .scss files:
#import "CSS:../../bower_components/alertify/themes/alertify.core";
#import "CSS:../../bower_components/alertify/themes/alertify.default";
#import "CSS:../../bower_components/normalize-css/normalize";
#import "../../../bower_components/bourbon/app/assets/stylesheets/_bourbon";
#import "../../../bower_components/neat/app/assets/stylesheets/_neat";
It can be added to a Gemfile like so:
source "http://rubygems.org"
gem "sass-css-importer"
And required in the Gruntfile:
sass:
options:
quiet: true
require: 'sass-css-importer'
static:
files: [
expand: true
cwd: 'source/styles'
src: ['*.scss']
dest: 'build/styles'
ext:
YMMV. Good luck!
I have coded a Landing page just to try Twitter Bootstrap with Less files.
I am not sure if I have organized my less files as it should be.
In the head section of my index.html:
<link rel="stylesheet/less" type="text/css" href="bootstrap.less" />
Here the content of my bootstrap.less
// Core variables and mixins
#import "less/variables.less"; // Modify this for custom colors, font-sizes, etc
#import "less/mixins.less";
// CSS Reset
#import "less/reset.less";
// Grid system and page structure
#import "less/scaffolding.less";
#import "less/grid.less";
#import "less/layouts.less";
// Base CSS
#import "less/type.less";
// Utility classes
#import "less/utilities.less"; // Has to be last to override when necessary
In my folder "less" i have the following files
utilities.less
utilities.css
variables.less
variables.css
grid.less
grid.css
type.less
layouts.less
mixins.less
scaffolding.less
reset.less
They are all actually necessary to make my landing page work but I am not sure if this file organization is the best solution.
I am bit confused about that, could you help me out and tell me if I am doing well? Is there a better way to organize the files?
Here you see the landing page
How you organize your files is entirely up to you, but here's how I normally do it during development:
public/
css/
layout.css (compiled from main.less)
less/
main.less (imports bootstrap/bootstrap.less)
bootstrap/
bootstrap.less
...etc...
Usually main.less also imports files like blog.less, forum.less, etc (depending on the site content). This schema lets me include layout.css in the HTML, and either compile the lesscss through a watcher, or on demand.