I am new to Laravel and have just started learning about views, routes, migrations, etc. I tried to include the Font Awesome CSS library using the link statement, but that didn't work. I found an answer on Stack Overflow that used npm but got an error running npm run dev that was marked as the solved answer. I also tried to use {{ asset() }} as well as several other functions but none of those worked.
What should I do?
Wrap the code in the url method.
<link href="{{ url('new_dedicated_folder/font-awesome.css') }}" rel="stylesheet">
put inside in head tag
if u use cdn
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
if u use local copy
<link href="/css/fontawesome.min.css" rel="stylesheet" />
make sure youre fontawesome copy is inside of public/css directory
Related
sorry in advance my english is bad
I have a problem when I will use laravel jetstream for my project. Because when i used stack livewire, the display doesn't match, here I give the output result
enter image description here
And also I've run npm install & npm run dev so it will run development using mix as default
Here I will give the project folder structure
enter image description here
maybe what I can conclude is to change the development process from mix to vite, or there are hints from the experts here on how to solve the problem?.
Thank you in advance
Actually you can fix this issue by replacing the #vite with these one in views/layouts/app and guest blade.
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
because you install previous version of laravel, #vite was added in 9.+ laravel so i think its just bc you using 8. (any <9) version, just install previous jetstream version for example composer require laravel/jetstream:2.7.0
go to resources\views\layouts\guest.blade.php and resources\views\layouts\app.blade.php and replace below code, if its not there, just insert below code in these two files.
and also remember to comment out #vite line, see below screenshot.
see screenshot
I hope it will solve the problem.
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<script src="{{ asset('js/app.js') }}" defer></script>
this can help you to solve #vite :
php artisan view:clear
I install Twitter Bootstrap using composer and can easily include the CSS like this:
<link href="{{ URL::asset('css/app.css') }}" rel="stylesheet">
However, when I install Font Awesome using composer in the same way, I don't see any CSS files added to that folder. The one CSS file created by Font Awesome is in /app/vendor/components/font-awesome.
How do I include the downloaded Font Awesome CSS into HTML?
Thank you.
Just put the downloaded css file inside public/css/ directory and add following line in your view file.
<link rel="stylesheet" href="{{ asset('css/font-awesome.min.css') }}">
And, Make sure your directory structure should like this:
public/css/font-awesome.min.css
public/fonts/
So that, icon will be displayed properly.
In Laravel, I’ve in public/css/app.css the following:
body { background: "red"; }
It’s linked to my layout like this:
<link rel="stylesheet" href="/css/app.css" media="screen" title="no title" charset="utf-8">
But when I go to the home page, the style isn’t applied to the body. I checked the source and the CSS file is there!
I removed the cache but nothing happened. This problem start after I added version() to elixir but after that I removed all the build folder, now I can’t get the style working.
When you use version() in elixir the filename changes. You can add following helper
<link rel="stylesheet" href="{{ elixir('css/app.css') }}">
this will always return the correct file name.
Refer to the documentation for versioning and cache busting.
Also make sure you run the gulp command again since you deleted the build folder.
I think you need to use asset to refer/link to files in public folder
<link rel="stylesheet" href="{{asset('/css/app.css')}}" media="screen" title="no title" charset="utf-8">
You should write this. This is Laravel predefined Function
{{ HTML::style('css/app.css'); }}
I am using laravel and nodejs on WAMP Server on Windows 10. Now using the elixir mix function
elixir(function(mix) {
mix.sass('app.scss');
mix.version('css/app.css');
});
which is generating a version file for my app.css and placing it to
public\build\css\app-d37b3a9d94.css
now when I add the link of the css file by using elixir function, like following
<link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}">
it generates a path like
/build/css/app-d37b3a9d94.css
but with this, the css do not work on the resulted page. I troubleshoot the problem and found that it do not work due to the first slash in the path. when I manually add the above css file path (which elixir generated) by removing the first slash, it works. like the following
build/css/app-d37b3a9d94.css
I am not sure how to fix this problem where elixir generated path to css file work. Looks like elixir adding an extra slash before the path but I have checked the code on several places for laravel and the code works with first slash in path. Not sure why it is not working for me.
One more thing I have noticed, even if I remove mix.version('css/app.css'); from gulpfile.js (which generate version file) and run gulp command to update css/app.css, and use <link rel="stylesheet" type="text/css" href="{{ elixir('css/app.css') }}"> it still refer to the version file rather than referring to css/app.css Is it a correct behavior?
Try to use it this way:
<link rel="stylesheet" type="text/css" href="{{ asset(elixir('css/app.css')) }}">
I get an Error Message with laravel 5, which I don't understand.
Next exception 'ErrorException' with message 'File build/css/all.css not
defined in asset manifest.
I haven't installed any asset pipeline or something. Just used elixir to compile, minify and version the scss-file to all.css and included it into the master view with <link rel="stylesheet" href="{{ elixir("css/all.css") }}">
What is this 'asset manifest' and how to fix this error?`
The question is of course what you want to achieve.
If you simply put all.css file into the public/css directory and you want to display this file, you can use:
<link rel="stylesheet" href="{{ asset('css/all.css') }}" />
However if you plan to modify this file and you don't want to have caching issues, you can put this all.css file again into public/css then put into gulpfile.js:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.version('public/css/all.css');
});
Now you'll need to run:
gulp
in your terminal, and now you can use
<link rel="stylesheet" href="{{ elixir('css/all.css') }}" />
as you previously did in your HTML.
It will create public/build/ folder with rev-manifest.json (this file is missing in your case).
I would recommend you to watch Managing assets Laracasts episode to understand it a bit better.
Same issue here!! I solve it by creating production version of css. I update gulefile.js as bellow,
elixir(function(mix) {
mix.sass('app.scss').version('css/app.css').browserify('app.js');
});
Then run following command which will create rev-manifest.json file in public/build directory.
gulp --production
Good luck!!