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
Related
I have made a wordpress theme with understrap and I have uploaded on a webhost and it works fine.
The issue is that I wanted to make some changes so I edit my scss file localy and when I uploaded it the changes weren't applied. Am I suppose to upload any other file in order to work?
Thank you in advance
I don't know if this will help anyone but in order to update website's scss on host you simply copy the css file which usually is in the css folder and you just upload it to the same folder.
The SCSS needs to be compiled into - and replace the existing - CSS files enqueued by your theme. To do this you can either, install a plugin that does that, or have it done by setting up css pre-processing in your local IDE/environment.
clear cache of your browser and close recent tab and try again. it just browser runnung with previous cache.
I am trying to use Icon Fonts on my NativeScript app.
So I followed the oficial documentation and those were my steps:
(1) - Downloaded the ttf files into my app/fonts folder:
(2) - On my app.css I declared the font global class like so:
.fa {
font-family: "Font Awesome 5 Free", "fa-regular-400", "fa-solid-
900";
}
.fa-solid {
font-family: "Font Awesome 5 Free", "fa-solid-900";
}
(3) - Then on my html component:
<Label text="" class="far"></Label>
But My Icon does not appear on the screen. I am using NativeScript 6+ with Angular 8.
Any Help ?
I figure it out why the Font Icons wasn't showing up!
I was using NativeScript 5.1 and since version 6.0 was released I migrated the project:
tns migrate
The problem is that I was using NS with Angular 8 and according to the docs I have to place my fonts on the project's root folder.
In your root application folder (This is the app folder for NativeScript Core, and the src folder for Angular 6+), create a folder called fonts and place the .ttf there.
So, Clearly the problem was that my fonts folder was inside /app when it should be inside /src folder.
It took me too long to realize that because for some strange reason my imported text fonts like 'Montserrat.tff' was working just fine. So I thought the problem was related with NativeScript or whatever.
In short, the Wrong way to do it with NativeScript and Angular 6+:
The right way:
I hope this helps newcomers who may stumble in the same problem/situation.
I am using the Laravel framework with npm.
In the scss file i have image path:
background-image: url("../../img/frontend/payments.png");
by compilation when I open the styles.css and look for that image the path is the following:
background-image: url(/images/payments.png?464788fabc66a26cf02344b0dcbcdde2);
How can I change that path, because all my images are in img/ folder.
There is another thing which is bothering me. I need to copy the payments.png in the resources/sass folder, which is copying tha that picture in public/images. So i have the duplicate of each picture. Is it somehow possible to stay all my images in the public/img folder ?
If you're using Laravel mix, the urls change because of the webpack url processing.
You can read more about it in the official documentation.
tldr
mix.options({
processCssUrls: false
});
And about the duplicate resources (like the pictures you mentioned): Keep the original resources in the resources directory and copy them using Laravel mix to the public folder. The reason behind this is sometimes you want to process the resources and then copy them. for example first optimize the png files then copy them to the public folder while keeping the original file in the resources directory.
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..
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