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
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'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
iam using font-awesome (sass version - Link) in my asp.net site.
i have the problem that all fonts is rendered as ?
i have chek many times font path and css class but all seem correct
this is my html: <i class="fa fa-magic"></i>
inspecting the page with firebug i see fontawesome-webfont.woff correctly loaded
folder structure is complex since i use bundleTransformer to render all sass files
i have
Style
- fonts
- font-awesome
- Sass
- External
- font-awesome
- font-awesome
bottom level font-awesome folder contains all font-awesome .scss files
this is the path in _variables.scss:
$fa-font-path: if($fa-sass-asset-helper, "font-awesome/", "fonts/font-awesome/") !default;
upper font-awesome folder contains _font-awesome.scss that import all .scss
external folder contains __external.scss
with this code: #import "font-awesome/font-awesome";
in sass folder i have my application.scss file:
#import "Base/placeholders";
#import "Base/mixins";
#import "Pages/__pages";
#import "Modules/__modules";
#import "External/__external";
finally style is rendered with this boundle:
var commonStylesBundle = new CustomStyleBundle("~/Style/tema");
commonStylesBundle.Include("~/Style/Sass/application.scss");
commonStylesBundle.Orderer = nullOrderer;
commonStylesBundle.Transforms.Add(new CssMinify());
bundles.Add(commonStylesBundle);
and added in this way to masterpage `head:
<%# Styles.Render("~/Style/tema") %>
The page looks for file in this path:
/Style/fonts/font-awesome/fontawesome-webfont.woff
and finds it
i have try BootstrapCDN by MaxCDN and it works fine but i can't use it since our user can browse only in local network and can't use internet resources
looking deeper in solution i found that an edit made for AjaxControlToolkit MaskedEdit by other developer altered the standard encoding.
setting it back to UTF-8 solved this problem.
thanks to #cimmanon for link where i read about char encoding
i'm including external font css (Google Font) on my css file using #import
styles.css
/* Feel free to use #import. r.js will merge them, when building */
#import "../vendor/bootstrap/css/bootstrap.css"; //this is included
#import url(http://fonts.googleapis.com/css?family=Chewy); //would this be included?
...
would r.js include the remote file and optimize it? r.js doesn't have a full documentation on its switches and settings or I am just missing something? or i just reconfigure my build to include the remote/cdn file?
No, as of 2.1.5 I'm getting this output:
Optimizing (standard.keepLines) CSS file: /.../style/style-all.css
/.../style/style-all.css
Cannot inline css import, skipping: https://fonts.googleapis.com/css?family=Chewy
Analysing source code on github suggests that it only supports relative paths.
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