I installed ionicons using npm install --save ionicons so that my package.json updated to:
"dependencies": {
"ionicons": "^3.0.0"
}
Next, I added the following in my /resources/assets/sass/app.scss:
// Ionicons
#import "node_modules/ionicons/dist/scss/ionicons";
After successfully running npm run dev, I ended up with
/public
/css
app.css
/fonts
/vendor
/ionicons
/dist
ionicons.eot
ionicons.svg
ionicons.ttf
ionicons.woff
ionicons.woff2
With no errors in the browser console, not a single ionicon (e.g. <i class="icon ion-home"></i>) is showing. I inspected public/css/app.css, and found that it references ionic fonts like so: /fonts/vendor/ionicons/dist/ionicons, which seems to comply with the folder structure above.
I tried adjusting #import, changing url(...) refrences in app.css, moving fonts directory - no luck. Lastly, I tried to reference ionicons through a CDN, and it worked like charm.
What am I doing wrong here? Thanks
It turns out that I was using the docs for the wrong version of ionicons:
v2.0.0 ionicons.com
v3.0.0 ionicframework.com/docs/ionicons
If you install ionicons with NPM as I did, you'll get the latest version; if you clone them from their github repository, you'll get v2.0.0. It turns out that in v3.0.0, many icon classes were removed/changed, hence I couldn't see <i class="icon ion-home"></i>, what a waste of time!
Paste these two lines right before your tag:
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
Uninstall ionicon from your depencency:
npm uninstall ionicons
For anyone else facing this issue. This is what fixed it for me :slight_smile:
npm uninstall ionicons
npm install ionicons
when you install the package
add this command : ng add #ionic/angular
Now the Ionicons has been updated to v4.x. (Answer written at 2019-06-24)
Try like this:
Before import the scss after install, set the value of $ionicons-font-path:
$ionicons-font-path: "~ionicons/dist/fonts";
#import '~ionicons/dist/scss/ionicons.scss';
When use the icon tag, write in ion-icon tag:
<ion-icon name="add"></ion-icon>
Related
I can't use the app.css in my application. Every time the server returns following error
GET http://localhost:8000/css/app.css net::ERR_ABORTED 404 (Not Found).
I use a blade page.
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
I tried to use php artisan serve and php -S localhost:8000 -t public and the booth didn't work.
try this before running your project on server make sure to compile laravel-mix
npm install
and then run
npm run dev
your facing the error because app.css not compiled yet
Make sure you compile your css imports properly in resources/css/app.css first. It should look something like this:
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Bootstrap
#import 'bootstrap';
// Font Awesome
#import '#fortawesome/fontawesome-free';
Then, run this on your terminal: npm run dev. This will in turn, compile your app.css in your public/css. If you are making custom css definitions, i suggest using a custom.css and putting it in your public/css folder, and define it BELOW your app.css, like:
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/custom.css') }}" rel="stylesheet">
Assets must always be in the public folder so they can be seen by the {{asset ('') }} command.
Use this worked 100%
run this command
npm i vue-loader
then run
npm run dev
you will get your solution .
This the step for installing:
composer require laravel/ui --dev
php artisan ui bootstrap
php artisan ui bootstrap --auth
npm install
npm run dev
If you get an error at this step you can try this:
npm run prod or npm run production
please some help.
npm run dev gives me an error
ERROR in ./resources/sass/fontawesome_app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/dist/cjs.js??ref--5-5!./resources/sass/fontawesome_app.scss)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: Failed to find '~#fortawesome/fontawesome-free/css/all.css'
in [
/var/www/html/resources/sass
]
at /var/www/html/node_modules/postcss-import/lib/resolve-id.js:35:13
# ./resources/sass/fontawesome_app.scss 2:14-265
I have a new laravel installation with auth and vue. First I installed tailwind;
composer require laravel-frontend-presets/tailwindcss --dev
artisan ui tailwindcss --auth
npm install
npm run dev
Tailwind removed some stuff from the laravel project, so now i try to make fontawesome work again. (i had it working before installing tailwindcss)
npm install --save #fortawesome/fontawesome-free
in webpack.mix.js i add
.sass('resources/sass/fontawesome_app.scss', 'public/css')
I created the file resources/sass/fontawesome_app.scss;
// Fonts
#import '~#fortawesome/fontawesome-free/css/all.css';
In the head of my welcome.blade.php;
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<link href="{{ mix('css/fontawesome_app.css') }}" rel="stylesheet">
i compiled all code by running;
npm install && npm run dev
And now i got that error. I named the css like that so it doesn't conflict with
the webpack lines tailwind created.
Please some help!
I changed resources/sass/fontawesome_app.scss into this and it gave me no errors anymore;
// Fonts
$fa-font-path: "../webfonts";
#import '~#fortawesome/fontawesome-free/scss/fontawesome.scss';
#import '~#fortawesome/fontawesome-free/scss/solid.scss';
#import '~#fortawesome/fontawesome-free/scss/brands.scss';
#import '~#fortawesome/fontawesome-free/scss/regular.scss';
I want to install MDB Vue in my fresh Laravel application Im trying to do it via npm but it's not working
I did :
1- created fresh Laravel app
2- Go to the directory www/myApp
3- npm install
4- npm install --save mdbvue
5- npm install --save-dev babel-preset-stage-2
6- I open app.scss
and add:
// Material Design Bootstrap
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
#import '~bootstrap/scss/bootstrap';
#import "~mdbvue/build/css/mdb.css";
7- I open ressources/js/bootstrap.js
I add:
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('mdbvue'); // I added this!
} catch (e) {}
it require('mdbvue') I notice a message in the picture:
https://i.imgur.com/IkKvXkb.jpg
I can't post it need more reputations
I keep going I did
8- npm run dev
Everything is green and looking fine but when
I go take MDB buttons in exemple and put themes in my view it's not working
did I missed something ? help please
Your have to add your imports in the app.js file.
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css'
For me it works without the require('mdbvue'); in the bootstrap.js.
But i think the reason you did´nt get an answer for your question is, there are other problems with the integration of mdbvue into the laravel environment.
For example i have not found a way yet to import fontawesome from my npm-installation folder import '#fortawesome/fontawesome-free/css/all.min.css';.
But when i add <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"> to my html-head, fontawesome works.
If i find some solutions, i will update this post.
Hope i could help you a bit.
I had the same issue, I could solved it like this:
Cd into your project
Run: npm install
Run: npm install mdbvue
Add the following code to your 'resources/js/app.js' file:
require('./bootstrap');
import '#fortawesome/fontawesome-free/css/all.min.css'
import 'bootstrap-css-only/css/bootstrap.min.css'
import 'mdbvue/lib/css/mdb.min.css'
Add the following code to your 'resources/js/bootstrap.js' file:
require('mdbvue');
Run: npm run dev
It worked for me, using laravel 5.8.35 and the lastest version of MDVUE.
I try to create a custom plugin. Wheni import Image from '#ckeditor/ckeditor5-image/src/image' i get an error
This dependency was not found:
* -!../../../css-loader/index.js??ref--6-oneOf-3-1!../../../postcss- loader/src/index.js??ref--6-oneOf-3-2!./#ckeditor/ckeditor5-theme- lark/theme/mixins/_rwd.css in ./node_modules/css-loader??ref--6-oneOf-3-
1!./node_modules/postcss-loader/src??ref--6-oneOf-3-
2!./node_modules/#ckeditor/ckeditor5-image/theme/textalternativeform.css
To install it, you can run: npm install --save -!../../../css-
loader/index.js??ref--6-oneOf-3-1!../../../postcss-loader/src/index.js??
ref--6-oneOf-3-2!./#ckeditor/ckeditor5-theme-lark/them
How should i fix it? I've installed this package https://github.com/ckeditor/ckeditor5-theme-lark and there is no effect.
Make sure you have created the vue.config.js file and included the details from
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html
Make sure #ckeditor/ckeditor5-theme-lark is installed
npm install --save #ckeditor/ckeditor5-theme-lark
That should then fix the issue
after modified the vue.config.js make sure you are re-run again your VUE application
npm run dev
or
npm run serve
In my case, I got same error because I did not follow the guide very well. After read it I had to run this:
npm install #ckeditor/ckeditor5-theme-lark
npm install --save #ckeditor/ckeditor5-vue2 #ckeditor/ckeditor5-dev-webpack-plugin #ckeditor/ckeditor5-dev-utils postcss-loader#4 raw-loader#4
For specific modules selected, something like this:
npm install --save #ckeditor/ckeditor5-basic-styles #ckeditor/ckeditor5-editor-classic #ckeditor/ckeditor5-horizontal-line #ckeditor/ckeditor5-alignment #ckeditor/ckeditor5-autosave #ckeditor/ckeditor5-adapter-ckfinder #ckeditor/ckeditor5-essentials #ckeditor/ckeditor5-font #ckeditor/ckeditor5-heading #ckeditor/ckeditor5-image #ckeditor/ckeditor5-indent #ckeditor/ckeditor5-link #ckeditor/ckeditor5-list #ckeditor/ckeditor5-paragraph #ckeditor/ckeditor5-paste-from-office #ckeditor/ckeditor5-remove-format #ckeditor/ckeditor5-typing #ckeditor/ckeditor5-basic-styles
Then, in my case I use VUE 2+ version, so I had to modify the vue.config.js file, accorging the official documentation: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/vuejs-v2.html
Plase check the documentation with your specific framework: https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/frameworks/overview.html
I have installed font-awesome with npm with following command :
npm install font-awesome --save
And then i have add following line in app.scss
#import "~font-awesome/scss/font-awesome";
Then i have run npm run watch
I have checked manually font-awesome folder is there inside the node_modules directory.
But in my webpage icon not displayed and in console i have seen following Error
GET
http://localhost/fonts/vendor/font-awesome/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e
net::ERR_ABORTED GET
How do i resolve the issue?
Since your are using Laravel, you need to write the following line in resources/asset/sass/_variables.scss:
$fa-font-path: "~font-awesome/fonts/";
Now in your resources/assets/sass/app.scss, write:
#import "~font-awesome/scss/font-awesome";