I have a Laravel application. I downloaded an admin_template and integrated it into my app. I use Font Awesome with CDN in my admin-template, and it works no problem.
In the front pages of the application, I can't use Font Awesome. I tried all the way, (downloaded, CDN used, etc.) but no luck. Can anybody help me?
I tried this also https://stackoverflow.com/a/43819770/9145012
I'm using Font Awesome 4.7.
Thanks.
I use yarn add it:
yarn add font-awesome
modify app.scss:
#import '~font-awesome/scss/font-awesome';
$fa-font-path: '/fonts/font-awesome';
and webpack.mix.js:
mix.options({
processCssUrls: false
});
mix.copy('./node_modules/font-awesome/fonts/**', 'public/fonts/font-awesome');
Related
I have just managed to install Svelte on top of Inertia js into a Laravel environment. So far it appears to work. However, I can not get the Svelte extension in google Chrome to work. I have read some comments that somewhere you need to have "dev:true" set where the default is "dev:false" I have also run npm run dev to no affect.
Any one know how to make this work?
Many Thanks !
I think dev: true props didn't add to Rollup or Webpack config file. Below is a link from the official docs:
Enable Svelte Google Chrome Dev Extension
I have installed argon design system using npm. And inside the head tag, I have added links from the documentation. But I want to extract it from node modules using mix. And run in webpack so that it renders styles. Please, someone, help with a detailed answer.
import the argon js file (in bootstrap.js for example if you're using the default laravel boilerplate) after popper, jquery and bootstrap:
require("argon-design-system-free/assets/js/argon-design-system");
and the css file (in app.scss if you're using it):
#import "~argon-design-system-free/assets/css/argon-design-system.css";
if you want the nucleo icons import then before the css file:
#import "~argon-design-system-free/assets/css/nucleo-icons.css";
I'm using Laravel Mix, and when I run npm run dev, everything is good, but when I run npm run prod, in minified style.css, all #import url()s get deleted!
Webpack
const mix = require('laravel-mix');
mix.setPublicPath('public');
if (mix.inProduction()) {
mix.version();
}
I have no settings, and I use mix.styles([sources, dist]) to manage my pure CSS style files. In one of my sources, I have something like the following.
#import url(../../dist/icons/font-awesome/css/fontawesome-all.css);
However, when I minify them, all #imports are gone! Is there any setting or something? Is resolve-url-loader a package to manage the kind of such things? If yes, would you please make an excellent example of using it?
To import Font Awesome for compiling assets in Laravel do it this way...
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
See: Laravel 5.7 + Font Awesome
If it is a font-awesome case, just change life easier by using a personal font-awesome personal cdn kit. All you need is to register an account, get a free or pro plan, and get the url.
#import url(your-fontawesome-personal-cdn-link);
Does anyone have any idea of the CSS framework used by Vue.js website?
I want to use the theme on my website. It's so awesome.
From what I can see in their style.css they are NOT using any framework. It's 100% their code.
The only 3rd party libraries they use are:
Font Awesome
Google Fonts
styles for Algolia's search
have a strange one! When working with my Laravel 5 app using font awesome, every icon shows up as it should when I am running locally with debug set to on.
When I turn off APP_DEBUG and set to false, one of my font awesome icons just does not show!? Very odd - any ideas?
Thanks!
There is probably something weird with the href of the fontawesome css link tag. Check your url or just use a cdn such as:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">