Comments (6)
I did it and it works for me.
These are my steps:
- Install via npm
npm install --save-dev @fortawesome/fontawesome-free
- Update the
webpack.mix.js
file to automatically copy the font files into the dist folder
mix.copyDirectory( './node_modules/@fortawesome/fontawesome-free/webfonts', './assets/dist/fonts/font-awesome' );
- Update the
style.scss
file of AWPS to set the new font path and import the font-awesome styles:
$fa-font-path: "../fonts/font-awesome" !default;
@import 'node_modules/@fortawesome/fontawesome-free/scss/brands';
@import 'node_modules/@fortawesome/fontawesome-free/scss/regular';
@import 'node_modules/@fortawesome/fontawesome-free/scss/solid';
@import 'node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
from awps.
- Install
yarn add @fortawesome/fontawesome-free
- Import into styles
$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
from awps.
Thanks Alex, I solved it by updating Webpack.mix.js file to ignore URLs
.options({
processCssUrls: false,
}).version()
from awps.
I did it and it works for me.
These are my steps:
- Install via npm
npm install --save-dev @fortawesome/fontawesome-free
- Update the
webpack.mix.js
file to automatically copy the font files into the dist foldermix.copyDirectory( './node_modules/@fortawesome/fontawesome-free/webfonts', './assets/dist/fonts/font-awesome' );
- Update the
style.scss
file of AWPS to set the new font path and import the font-awesome styles:$fa-font-path: "../fonts/font-awesome" !default; @import 'node_modules/@fortawesome/fontawesome-free/scss/brands'; @import 'node_modules/@fortawesome/fontawesome-free/scss/regular'; @import 'node_modules/@fortawesome/fontawesome-free/scss/solid'; @import 'node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
same, but with gulp:
- Install via npm
npm install --save-dev @fortawesome/fontawesome-free
- The open your gulpfile.js and paste task:
gulp.task('icons', function() {
return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
.pipe(gulp.dest('app/fonts/font-awesome/'));
});
- After that go to your main SCSS file and paste that code at the top(or after other imported files in your main SCSS file):
$fa-font-path: "../fonts/font-awesome" !default;
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid";
NOTE: For correct work folders should be named equally. I mean in gulpfile.js path "'app/fonts/font-awesome/'" and in SCSS file the path $fa-font-path: "../fonts/font-awesome"
from awps.
You changed the path to ../fonts
, are you sure all the font files are inside that folder?
The error is telling you that the compiler can't find the fa-brands-400.eot
file.
from awps.
Let me explain, what I am doing, so that you could get better idea of the issue.
- Installed font awesome icons using npm
- In style.scss I added following code
`
$fa-font-path: "../webfonts" !default;
@import "@fortawesome/fontawesome-free/scss/fontawesome";@fortawesome/fontawesome-free/scss/solid";
@import "
@import "@fortawesome/fontawesome-free/scss/brands";@fortawesome/fontawesome-free/scss/regular";`
@import "
- Web pack copied fonts in my fonts folder
Now if I use the default path of font awesome as per their documentation “../webfonts” in my css file it shows the
src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot
But when I change path to “../fonts” is shows following in css file but with error in my npm run watch command
src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot
When I am using same process without changing path “../webfonts”, it works fine with laravel.
Please guide, where am I going wrong in this.
from awps.
Related Issues (20)
- Is this project alive? HOT 1
- Testing wordpress v5 beta2 HOT 2
- Warnings and errors HOT 2
- css double slash in path HOT 1
- Request Changelog feature HOT 5
- TypeError: Cannot read property 'RichText' of undefined in gutenberg.js HOT 3
- Call to undefined function svg() HOT 5
- PHP dotenv v3+ new method required in wp-config.php HOT 1
- Sourcemaps
- Woocommerce product page (Product Gallery not working) HOT 1
- Unload module javascript file HOT 1
- The site is experiencing technical difficulties while following awps HOT 1
- Carousel css not loaded HOT 1
- Fatal Error Dotenv HOT 2
- Dotenv isn't pulling WordPress environment variable values from .env file HOT 2
- Running "npm run dev" throws error from "sass-loader" HOT 3
- Use GitHub CI
- Usage with Local? HOT 1
- "/" as divider in SCSS files throwing depreciation warnings
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from awps.