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
Related
I'm trying to learn Laravel and I've run into an issue that I can't seem to figure out with Google Fonts and Sass.
I'm trying to load my font on app.scss with:
// Fonts
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
But it compiles to app.css as:
#import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;
700&display=swap);#charset "UTF-8";
If I manually correct app.css it works. But how do I get Sass or Laravel to compile it properly?
This is caused by a known bug in Webpack which appears to be still open.
Details here: https://github.com/webpack/webpack/issues/10873
I solved it by modifying it as follows:
original:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:wght#400;700&display=swap");
modified:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:400,700");
I am trying to implement Sass in my project. I have imported font-awesome with NPM and have my main style.scss file that I want to import Font Awesome in. I read through the font-awesome documentation about getting started with Sass. I have:
Copied the font Awesome directory into my project.
Opened 'font-awesome/scss/_variables.scss' and edited the $fa-font-path variable to point to my font directory.
$fa-font-path: "project/node_modules/font-awesome/fonts" !default;
I imported the font-awesome.scss file into my main style.scss file like so and tried to implement the use of an icon but the icon ends up rendering as a blank square.
/*How I Import At The Top Of My Page*/
#import "project/node_modules/font-awesome/scss/font-awesome";
/*How I Try To Implement*/
p:first-child:before{
content: $fa-var-mobile-phone
}
From what I have read, it seems that I have some sort of mapping issue but everything looks correct to me.
From what I can tell from your information supplied. You need to set font-family, that should be the file not just the path.
p:first-child:before{
content: $fa-var-mobile-phone;
font-family: 'Your font-awesome';
}
I had the same issue and the solution was to follow the official docs.
In our style.scss (or app.scss in other cases) add the following:
#import '~#fortawesome/fontawesome-free/scss/fontawesome.scss';
#import "~#fortawesome/fontawesome-free/scss/solid.scss";
#import "~#fortawesome/fontawesome-free/scss/brands.scss";
Add the font-path to your _variables.scss:
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
Note that I was using npm for package management and I installed the fontawesome with:
npm i #fortawesome/fontawesome-free
Whenever I try to bundle exec jekyll build/serve I get the following error:
Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss':
Undefined variable: "$output-bourbon-deprecation-warnings". on line 20
jekyll 3.6.0 | Error: Undefined variable: "$output-bourbon-deprecation-warnings". on line 20
I'm not even sure where to look, because this variable doesn't appear in the css/main.scss file.
Code for the css/main.scss file:
---
# Only the main Sass file needs front matter (the dashes are enough)
---
#charset "utf-8";
#import "variables";
// TOOLS
#import "reset";
#import "normalize";
#import "bourbon/bourbon";
#import "neat/neat";
// GLOBAL
#import "base";
#import "layout";
// COMPONENTS
#import "header";
#import "footer";
#import "carousel";
#import "post-index";
// PAGE
#import "posts";
// CUSTOM
#import "custom";
I believe that the main use of it is for a prefixer. When I try to comment out bourbon entirely I get more errors. I've also tried removing and then reinstalling the gems.
Depending on how correctly the original theme you're using was configured, this is likely due to the gemfile not being locked down tight enough to the point that it allowed breaking changes.
Add the following to your SCSS file:
$output-bourbon-deprecation-warnings: false;
This must be added before #import boutbon;.
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've been trying to split my less files up in to sections to make them easier to navigate, and want to import them all using one main file to compile them to css. my style.less file looks like this:
#import "reset";
#import "colors";
#import "grid";
#import "functions";
#import "headings";
#import "listings";
#import "content";
#import "buttons";
#import "layout";
#import "forms";
I'm using Winless to compile, and it says "Successfull Compile", but the resulting css file is completely blank. When I change my style.less file to only have one import, it imports that file no problem, so I know it's not a file directory/permissions problem. Any ideas? This is driving me mad. I love LESS, I don't want to have to do everything in one sheet.
I'm on a PC. Don't seem to have any trouble doing this at work on OSX, but I use Windows 7 at home and need something like Winless. I get the same results using less.js client side javascript file.
This is an old issue and it now works fine with less.js in v2.5.3.
#import "reset.less";
#import "grid.less";
#import "color.less";
#import "custom.less";
CDN reference below:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
Just remember to put your:
<link rel="stylesheet/less" type="text/css" href="less/compiled.less"/>
before the less.js reference.
I think this was due to a bug in LESS.js, and has since been fixed. Additionally, I've now moved to SimpLESS on Windows, and CodeKit on OSX. Neither of these have the same issues.
Using less.js has given me issues. Like darylknight, I suggest an alternative. I present upon to thee WinLess