I've just started learning Grav CMS and wanted to use FontAwesome Pro with the sites I've made, I do have a license and all the necessary files.
I've added fontawesome-all.min.css to /user/plugins/admin/themes/grav/templates/partials/base.html.twig and the CSS file loads just fine on the site. But all the webfonts return 404
my base.html.twig now contains this
{% extends 'partials/base-root.html.twig' %}
{% do assets.addCss('theme://css/fontawesome-all.min.css') %}
I put the css in a css folder, on the same level as the css folder (in the g5_helium theme folder, I'm using Gantry 5 as well). yet chrome (or any other browser) fails to load the FA font files returning 404.
the path from my CSS file to the webfonts are the same as the path specified in the FA CSS file. I've attached output from my terminal where I print 1 line from one of the webfont files to prove that the path should, in my view, be correct.
➜ g5_helium git:(master) ✗ cd css; ls
fontawesome-all.min.css
➜ css git:(master) ✗ echo "examplepath from css file"
examplepath from css file
➜ css git:(master) ✗ tail -n 1 ../webfonts/fa-solid-900.ttf
window-alt window-closewindow-maximizewindow-minimizewindow-restore�windowon-sign�wrenchx-rayen-sign%
The path in the FA-all.css file is the same, output from file
url("../webfonts/fa-solid-900.ttf") format("truetype")
Can you supply the order you have everything, you may need to try and set the fontawesome .css above your custom.css for it to work. At least that's how they show it on the documentation.
Related
I have no prior experience of scss and I am using a Portfolio Template for my portfolio website.
I added one more section to the website. If I am defining a style in any _file.scss file which was present priorly, it is working fine but when I create a new _filename.scss file for it. It is not detecting the style from that file.
Do I need to configure something before running npm start or npm install.
I think you have to Import the file in your main scss file.
ex.:
given:
_filename.scss
usage in the main scss file:
#import "filename";
Remember***
Dont write the underscore in there, the underscore means, that it is a (scss) file that is going to be imported.
I have been trying to remove unused CSS from the style.css and in bootstrap.min.css in my website that is in development mode. Am using PostCSS & Parcel to do this.
So I installed both PostCSS and Parcel and then created a postcss.config.js.
The postcss.config.js has the following code
postcss.config.js
module.exports = {
Plugins:[
require("postcss-uncss")({
html:[
'/index.html'
]
})
]
}
When I run parcel index.html this error keeps showing up
G:\Aframara Website\images\about\ us.jpg: ENOENT: no such file or directory, open 'G:\Aframara Website\images\about\ us.jpg'
I have 7 Html files and the style.css as mentioned earlier together with bootstrap.min.css.
So I would like to reduce the size of all the two files. I watched this video and did exactly as he said. If anyone has another way I will appreciate thanks.
I found a way around it, I Installed npm i -g purgecss
Then I created a folder with the title 'purged' at the root of my website.
I ran this command
purgecss --css *.css **/*.css --content *.html *.js --output purged
What this command did it created the two files i.e style.css and bootstrap.min.css in the folder purged.
Then I changed the css styles URL from css/bootstrap.min.css to purged/bootstrap.min.css and css/style.css to purged/style.css
The *.js is to check to see if you have any styles dynamically generated in javascript. You can leave it if you want.
The size of my two files bootstrap.min.css and style.css were reduced significantly.
Hello hope you are well!
I am working on project when Frontend is in HTML, CSS, SASS, JavaScript, for backend I am using PHP Laravel framework.
My goal is to compile file sass into file CSS, for this reason I have followed their steps:
1.In folder resources, I created folder sass, into it, I created file app.sass
2. In folder public, I created folder CSS and into it, I created file app.css
In file webpack.mix.js I have written a method like below:
mix.js("resources/js/app.js", "public/js")
.sass("resources/sass/app.scss","public/css"
);
when first rules is for source "resources/sass/app.scss" and second rule is destination "public/css".
After that In file index.html I written this rule by document:
<link rel="stylesheet" href="{{ mix('/css/app.css') }}">
when I run : npm run dev/ npm run watch
sass compile into css as you can see, but in browser doesn't seen any style second images is the case in the web: I want to display styles on the web after compile it does any idea or maybe exist any another rules that I don't know yet?
Thanks.
enter image description here
enter image description here
I'm taking a course on CSS3 and HTML5, and I ran into some trouble: my CSS folder isn't located in the correct spot... or something. I have no clue what's going on, but after a few hours of messing around, I went into the inspect element tool, and noticed some files aren't loading, so that's why my CSS isn't working! I attached an image, can you tell me what it means?
Also, where should my CSS file be? I'm using bootstrap and sublime text.
Thanks in advance.
Well, nvm on that image. It says I need 10 credits...
It says in inspect element:
Failed to load resource: net :: ERR_FILE_NOT_FOUND
CSS files can be called from a path relative to the document calling them. For instance, given you have a folder directory that looks like this:
/(your root directory)
-css
-bootstrap
app.css
-img
-js
index.html
-pages
pageone.html
...your css link in your index should look like this:
<link rel="stylesheet" href="css/bootstrap/app.css" />
whereas the link for pageone.html would look like this:
<link rel="stylesheet" href="../css/bootstrap/app.css" />
the ../ tells the server to look in a directory directly above the calling file for the path described in the link
With Bootstrap, are you using straight CSS, LESS, or SCSS? If you're using a pre-compiler, check your pre-compiler's settings file to ensure your compiled css files end up in the proper directory.
In sublime text for getting directory path please install a package called Auto File Name if you have a package control already installed in your sublime if not, the google package control and install in your sublime editor , auto file name lets you go well in your directory path and call your files.
I have encountered the same problem before. the external stylesheets is not recongnized !!
Failed to load resource: net::ERR_FILE_NOT_FOUND
If your HTML is in the root and your CSS folder is also in the root then your links are incorrect. You shouldn't have a slash / in front of the file name.
try:
<link rel="stylesheet" href="css/style.css" type="text/css">
see this
This is the effect with font awesome, i only can get it when i using font awesome 4.1 CDN)
Using downloaded files, I included the fonts folder and font-awesome.css, but still no icon appear.
My link which is correct.
The font-awesome.css file path, i didn't change anything.
directory folders and files.
inside of font folder.
inside css folder.
********************************************************
I still didnt manage to get the icon show up, why??
Download the fontawesome package from their website.
Extract the package where you will find the fontawesome.css file.
Copy this file to your css directory
copy all the fonts files from the extracted fontawesome package to your fonts folder.
Finally add the fontawesome.css to your html page by giving respective location of the css file.
AND Voila !
Since I am using FontAwesome V5.3.1, I would like to update this answer since the folder structure was changed a bit in this version.
First, download the FontAwesome v5.3.1 and extract the folder.
Copy the all.min.css file from the CSS folder and add it in your stylesheets.
Now, Copy the webfonts folder from FontAwesome extract and place it into your project one directory above to your all.min.css file. (Refer the image below)
Since all.min.css file refers to the webfonts folder now, we need to add this file along with the webfonts folder.
src: url("../webfonts/fa-brands-400.eot"); // This is how it is been referred now in all.min.css file.
Thank you.
Just Downloading Css and linking to the file will not make sense,You should look into the css file....
You havent Downloaded the fonts folder in which all fonts styles are stored...
So Download it and give path to the font files located on your system ,
I have shown the links in boxes which you need to add links in font-awesome css files..
Download fonts from the cdn links and store in fonts folder..
Hope this will work for you..
You may find that the developer options in your favorite browser will give you an idea why the file is not working.
Font awesome requires the font files which come with it. The CSS file will reference these and try to include them, but currently won't be able to find them.
Download font-awesome-4.1.0.zip from FontAwesome
Then extract this and put the css and fonts folders into your project. You can then reference the file as:
<link href="css/font-awesome.min.css" rel="stylesheet">
Go to network console, turn font filter ON
See which files are downloaded in background
Right click and open in new tab.. it will download that file
Put them in root DIR of your server storage
For eg. htdocs/webfonts/fa-solid900.woff2
Final download all.css file and link to your head section
Welcome in advance :)
Search for the required file using developer tools
Download file locally
Also download all.css or whatever cdn you are using
Putting downloaded font files in this webfonts/ folder
Download fontawesome (font-awesome-4.7.0) : http://fontawesome.io/get-started/
Unzip and copy into your project as-is.
In HTML reference font-awesome.min.css e.g: <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css">
this link is so helpful.
and work for me.
go to Font Awesome.com and download font awesome for the web.
extract this file.
put the webfonts file from the font awesome (download file) to your project file. (Delete the rest of the folder :) )
make new txt and copy the all.css file to it. (name it font.css and put it to the css folder).
add <link rel="stylesheet" href="css/fonts.css"
Download "font awesome" for Web from this link https://fontawesome.com/download, extract the folder, and add a reference to the all.css file inside index.html
It is important to ensure relative links to eot & woff files other than css, in case you are using .htaccess
1) extract downloaded zip file to desired directory
in case .htaccess path is
H:\virtualhost\ .htaccess
and fontawesome css and fonts path is
H:\virtualhost\fontawesome-free-5.4.2-web\css
H:\virtualhost\fontawesome-free-5.4.2-web\webfonts
2) Make following entries in .htaccess
RewriteRule ^css/([^/]*).css$ /fontawesome-free-5.4.2-web/css/$1.css [L]
RewriteRule ^webfonts/([^/]*).eot$ /fontawesome-free-5.4.2-web/webfonts/$1.eot [L]
RewriteRule ^webfonts/([^/]*).woff2$ /fontawesome-free-5.4.2-web/webfonts/$1.woff2 [L]
RewriteRule ^webfonts/([^/]*).woff$ /fontawesome-free-5.4.2-web/webfonts/$1.woff [L]
3) Add following in head part of html
http://local-ip-address:port/css/all.css