Is there something wrong with the Font Awesome 3.2.1 NuGet package? When I upgraded from 3.1.1 to 3.2.1 all the fonts stopped displaying. If I link directly to Font Awesome via BootstrapCDN (http://www.bootstrapcdn.com/) everything works fine.
The problem is caused by incorrect relative paths in the CSS. To correct this, update the following files like so (this assumes that the font directory is a subdirectory of where your Font Awesome CSS files are located):
font-awesome.css, line 28-34:
#font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot?v=3.2.1');
src: url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
font-awesome.min.css, line 1:
#font-face{font-family:'FontAwesome';src:url('font/fontawesome-webfont.eot?v=3.2.1');src:url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'),url('font/fontawesome-webfont.woff?v=3.2.1') format('woff'),url('font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'),url('font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;}
Of course, this defeats the point of using NuGet packages, but consider it a temporary workaround until the package is fixed. It probably doesn't help that there are two FontAwesome NuGet packages to choose from, but I would assume once fixed, the package created by Dave Gandy will supercede the one created by JiveCode.
It's likely because the import path in the font-awesome CSS file is wrong for the way the NuGet package inserts the files. Problem I'm having is it's dumped all the files into the same directory but the import path assumes the CSS files are in their own directory within the directory that the fonts directory is in.
I'm feeling fairly sure it is indeed an issue with the package.
Related
I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).
The following works fine in a Codepen:
HTML
<p>red</p>
<p>blue</p>
<p>green</p>
SCSS
#use "sass:list";
p {
font-size: 25x;
font-weight: bold;
}
$colors: red blue green;
#for $n from 1 through 3 {
p:nth-child(#{$n}) {
color: list.nth($colors,$n);
}
}
This also works fine when compiling it locally with the Dart Sass CLI.
But when I try to compile this with the Live Sass compiler in VS Code, I get the following error:
Compilation Error
Error: Invalid CSS after "... color: list": expected expression (e.g. 1px, bold), was ".nth($colors, $n);"
Why is that?
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read the SASS official website, follow the instructions, write the code in Visual Studio Code, and then you get this strange Compilation Error when saving the SASS or SCSS file. You double-check everything and it seems like it should work, but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.
The extension you are using does not seem to be maintained anymore, you can try to use this one instead.
I was playing around with Bootstrap4 on codepen.io where I import production bundle of bootstrap (bootstrap.bundle.min.js) from a CDN.
I was wondering how to import _breakpoints within my SCSS? Unable to figure out the path.
I need to use Bootstrap Sass mixins.
Production bundles I'm importing:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js
I was to import the scss files from github in Pen Settings > CSS > Add External Stylesheets/Pens.
In particular, please keep the order:
https://raw.githubusercontent.com/twbs/bootstrap/main/scss/_functions.scss
https://raw.githubusercontent.com/twbs/bootstrap/9030f57db7762a48c813881ef22a99e6cebe99ce/scss/_variables.scss
https://raw.githubusercontent.com/twbs/bootstrap/3aaaa01ffa71e5a784451753d5bf9b86a1d5323c/scss/mixins/_breakpoints.scss
Eg: https://codepen.io/borracciablu/pen/JjOweaP
Note: Example done with Bootstrap 5, but same technique can be used for Bootstrap 4
I am learning Ionic 2; writing code in Visual Studio code. I created project using following command:
> ionic start --v2 MyFirstIonic blank
And then
> cd MyFirstIonic
> ionic platform add android
When I build and run, > ionic run android, ionic creates assets folder in www directory and copies font files for Ionicons, Roboto, and Noto-sans, which are added in apk during build process. I'd like to exclude Ionicons, Roboto, and Noto-Sans from final build, and use FontAwesome files instead. How will I be able to achieve this?
You need to edit your node_modules/#ionic/app-scripts/copy.config.js.
Sample file here.
Remove copyFonts entry :
copyFonts: {
src: ['{{ROOT}}/node_modules/ionicons/dist/fonts/**/*', '{{ROOT}}/node_modules/ionic-angular/fonts/**/*'],
dest: '{{WWW}}/assets/fonts'
},
from the file. This copies the ionicon fonts to your www folder.
Also remove the assets you do not need from src/assets folder.
You can edit copy.config.js file to add any other assets into the build process.
Refer answers here.
I would suggest you delete the unnecessary files from:
[project]/node_modules/ionic-angular/fonts/
(Keep the ionicons.* files.)
You'll still have to do that every time you update ionic-angular but it's easier and less error prone than keeping track of changes to the app-scripts bundle.
Additionally, comment out the roboto and noto-sans imports in:
[project]/src/theme/variables.scss
--
If you still want to update the script then the right way to do that is to copy the file locally as [project]/src/webpack.config.js and add the following entry to your package.json:
"config": {
"ionic_webpack": "./webpack.config.js"
}
--
Hope that helps!
I added babel to my project with 2 presets (es2015 and stage-0) and it added 100+ MB of dependencies to my node_modules folder.
Would it be possible to package only my transpiled code without babel dependencies, using a system-wide babel-cli? I tried installing this way but it errors:
Couldn't find preset "es2015" relative to directory "."
For instance with bower I could do something like this to get only the scss files (excluding js):
{
"dependencies": {
"bootstrap-sass": "~3.3.5"
},
"overrides": {
"bootstrap-sass": {
"main": [
"assets/stylesheets/_bootstrap.scss"
]
}
}
}
I am having an hard time understanding how to do it with systemjs. in the config.js file I guess but even reading the docs I could not figure it out.
My use case is: while developing I am loading Material angular with systemjs but I want to load only the js files, not the css, which I want to manage indenpdently in my scss. Instead systemjs keep loading the file angular-material.css. I just started with systemjs and jspm, hope you can help.
nb: my problem is not related to the jspm build or bundle process but to the development time with these tools.
JSPM supports overrides as well. See https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#testing-configuration for configuration options.
Using JSPM overrides you can easily override the main file and directories and files that you need from a module.
Upd. The css dependency is defined in the registry: https://github.com/jspm/registry/blob/974beb8b6520f4c1b3c6373db32ad05da5c82446/package-overrides/github/angular/bower-material%400.4.0.json It needs to be overwritten with the local override.