I just started studying Laravel, my app works fine and I was able to reference all my css and js files but one thing is not working correctly.. I downloaded font-awesome package from their site and install it manually on my app.. I referenced the font-awesome.min.css file on my master head file. it loads the css file but not the actual font-awesome web fonts file.. below is the folder structure inside my public folder
---public
--assets
-css
-js
-fonts
-images
i used blade to link the font-awesome css file.. on chrome dev tools it shows that it loads the css file but not the font files.
{{ Html::style('assets/css/font-awesome.min.css') }}
any ideas how to make it work??
Thanks guys..
Related
In my laravel 5.6 / vue.js 2.5.7/ Bootstrap4.1.0 application I want to set different color themes and I found this collection https://github.com/thomaspark/bootswatch
But how correctly to set them to my project? I tried to replace files
node_modules/bootstrap/dist/css/bootstrap.css
node_modules/bootstrap/dist/css/bootstrap.min.css
and cleared cache and rerun
npm run watch-poll
But no effect... Which is the right way?
Are there some tools to change color themes programmatically, say depending on logged user options ?
Adding a link of one bootswatch file in my layout file resources/views/layouts/app.blade.php, like:
<link href="{{ asset('css/darkly/bootstrap.min.css') }}" rel="stylesheet">
I see that colors of my layout of my pages is different, but I mean that in this case I ADD this css/darkly/bootstrap.min.css file to the EXISTING(ORIGINAL) bootstrap.min.css
and now I have 2 bootstrap.min.css files in my system.
Is it good decision?
I supposed that creators of bootswatch meant to REPLACE the original bootstrap.min.css file. How do you think?
And that is the question where original Bootstrap css(and bootstrap.js to) are attached to the project ?
in my layout file resources/views/layouts/app.blade.php a line:
that is a ref to my custom css file, the styles I add to the project.
I did not find how to skip attaching of the original Bootstrap CSS file...
Thanks!
Bootswatch is not meant to REPLACE the existing bootstrap CSS file. It is meant to work and OVERRIDE the styling rules from the default one, which means, load bootswatch css after you load the bootstrap css.
It would also be advisable to rename your downloaded bootswatch CSS file.
I'm new in Laravel framework and I'm having trouble on font-awesome. Icons are not showing or it's just showing rectangles. I install font-awesome using npm. I already added below code on my resources/sass/app.scss as well.
$fa-font-path: "../fonts/" !default;
#import"~font-awesome/scss/font-awesome";
Still I'm getting this error.
I don't know why that path is incorrect. Co'z my project is located in this path:
http://localhost/Examples/Laravel/proj-3/
Addition:
I found out that inside public/css/app.css #font-face{} src is incorrect as well. It should be src: url(../fonts/vendor and not src: url(/fonts/vendor.
Thank you in advance.
Where are those folders? You can show an image of the folder directory, because laravel you have private folders and public folders, if you need call any font or css this need are in public folder and not in the private
I Had same problem.
Just copy fonts files in public/assets/fonts
I am new to laravel homestead. I am using a windows 10 for my learning and able to run npm watch-poll. The app.scss is compiled successfully and the app.css file is updated in the public directory but, it wouldn't display in my browser. I have included the CSS script in my blade template. Only when I restart my machine then the css is displayed. Any one can help please.
I do appreciate.
This is how i solved this problem in my own project:
delete your link tag containing href="app.css"
save file
paste the link tag again
save file
If the above doesn't work, try pressing ctrl+f5 to clear browser cache.
How to disable browser cache on chrome:
https://www.technipages.com/google-chrome-how-to-completely-disable-cache
i have the following folder structure
application
assets\
\css
\js
\images
i have all the bootstrap files in the assets folder - css files in the css folder, js files in js folder etc.
My question is this. I have a view that uses the bootstrap.css. I reference it by doing something like:
<script type="text/javascript" scr=<?php base_url()?>assets/css/bootstrap.css> </script>
it find the file just fine. but when i try to use the built in images in bootstrap, they don't display because the bootstrap css is expecting the images to be in
"../img/glyphicons-halfing.png"
But the physical path of the view is something like:
c:\wamp\www\myapp\views\templates\
I guess I could just copy the image folder into the views folder... or i can edit the css to point to the right location. But i just wanted to check to see how others are organizing their folders using codeigniter and bootstrap.
thanks.
It's looking in 'img' - You need to amend it to 'images'
"../images/glyphicons-halfing.png"
Glyphicons goes inside the "assets\font" folder.
Just in case, I'm using CodeIgniter 3.x and Xampp 5.6.x on xubuntu.
assets\
\css\
\js\
\images\
\fonts\
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.woff2
I tried "Galleria" as a standalone application and it works perfectly fine .. however in order to make it work with Cakephp what are the changes that i need to make ?
I have tried changing the path of js and css files to absolute path .. it didnt help ..
// Load the classic theme
Galleria.loadTheme('http://localhost/agm2/js/galleria.classic.js');
and in galleria.classic.js .. changed the following line
css: 'http://localhost/agm2/css/galleria.classic.css',
This is what I did before it finally worked and I of course violated cakephp convensions:
I put all the javascript files (jquery, galleria, galleria.classic) in the cakephp js folder. Additionally, I had to put the images (classic-map.png, classic-loader) and the css file (galleria.classic.css) in the cakephp js folder before it finally worked.
But under normal circumstances, the galleria css file should be in the css folder, the images in the img folder and the galleria.classic.js should be able to locate them and this is the problem we have.