I've been banging my head against the wall for a good hour with this stupid problem.
I'm building a website and I'm using Font Awesome. The home page of the site is located in the root (/); a page called fog.html is in /content/books/. The Font Awesome folder (font-awesome-4.6.3) is in /fonts/, so that for example FA's fonts are in /fonts/font-awesome-4.6.3/fonts/.
I reference FA's CSS from the home page like this:
<link rel="stylesheet" href="fonts/font-awesome-4.6.3/css/font-awesome.min.css">
and from fog.html like this:
<link rel="stylesheet" href="../../fonts/font-awesome-4.6.3/css/font-awesome.min.css">
because fog.html is two directories deeper than the home. I checked with the inspector and FA's CSS is properly referenced in both instances.
FA's icons are visible on the home page, but I get blank squares on fog.html. I guessed it must be because FA fonts are referenced by FA's CSS using relative paths, and since the two pages are located in different parts of the directory tree, any relative path I type in there will take me to different places depending on the page the CSS is referenced in.
So I decided I'd just use absolute paths in FA's CSS. I'm doing this on my local PC, so the edited CSS looks like this:
/*!
* Font Awesome 4.6.3 by #davegandy - http://fontawesome.io - #fontawesome
* License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
*/#font-face{font-family:'FontAwesome';src:url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.eot?v=4.6.3');src:url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'),url('file:///E:/Nicola/The%20Elynx%20Saga/Current/Documents/elynxsaga.com/Site/fonts/font-awesome-4.6.3/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') [etc]
Regardless of all this mess, FA's icons still show on the home page, but they don't on fog.html. Clearly the absolute path can't be okay from one location and not okay from another, and since FA's CSS appears to be referenced properly on fog.html, I haven't got the foggiest clue why this happens.
Any help would be deeply appreciated!
Related
I am building a site from a jekyll theme. I was able to completely customize the whole site except the yellow icons in the picture. These weren't found in the site files. Nowhere. Inspecting that element just shows a div class. I need to remove these but I can't because I can't find them anywhere.
These icons are actually font. To remove them you will have to remove specific classes from the element. In this case for example if you want to remove Laptop icon, you would remove fa-laptop class from the i element.
You can read more about it on the following link Font awesome - Get started
Can you search for a file called font-awesome.min.css in your project root directory? These icons should be a reference from that file. You can modify the mappings to point to something else.
Yes, I know that this question has already been asked multiple times, and I've applied every solution that I could find, but I still have this issue:
If you visit my Jekyll site (yasath.github.io), the homepage and the tags page in the navbar render the CSS perfectly and look beautiful. However, when I click on a post (like this one), the CSS completely fails to render and I end up with an old-looking white background, Times New Roman text page!
My config.yml file has the right URLs (as far as I know!), and when I view the source of both pages with Chrome's developer tools, they both import the same CSS file correctly.
Hopefully, someone can give me advice specific to my site! This is the GitHub repo for the site, and again, here is the actual site.
The links to your stylesheets in your <head> section are written as relative links. You have, for example:
<link rel="stylesheet" href="assets/css/app.min.css">
When a URL starts with a directory name like "assets", the browser looks for that directory relative to the URL it's displaying right now. So when you're at yasath.github.io, it goes to yasath.github.io/assets/css/app.min.css... but when you're at https://yasath.github.io/2017/09/04/hello-jekyll.html, it looks for a stylesheet at https://yasath.github.io/2017/09/04/hello-jekyll.html/assets/css/app.min.css, which of course doesn't exist.
You want to start your URL with a /. That tells the browser to look relative not to the page it's displaying, but to the root of the website. So in your head template use:
<link rel="stylesheet" href="/assets/css/app.min.css">
...and similarly with all your other stylesheet URLs.
I'm trying to use Erik Flower's excellent looking weather icons here, but I can't get it to work. I'm using Flask and the folder structure looks like this:
-static
-css
-fonts
-js
I have copied the fonts and css files into their respective folders above. I insert a link to the css files like this:
<link href="{{ url_for('.static', filename='css/weather-icons.min.css') }}" rel="stylesheet" media="screen">
And it appears to work fine, I can go to the css file when I view page source. But when I try to display the icons as described in github page like this:
<i class="wi wi-day-sunny"></i>
I just get a square. I assume it's not finding the fonts where it is expecting them, but the twitter bootstrap fonts are in the same directory and seem to work fine (I can see the glyphicons).
I apologize for what might be a stupid mistake.
Thanks a lot,
Alex
Assuming you didn't change anything in the CSS file, the path to the font file(s) is incorrect.
Bootstrap, by default, expects the Glyphicons font file to be in a "fonts" directory, but the CSS for the weather icons is looking for a "font" directory (notice the missing 's'). Adjust the CSS or copy the fonts to the correct directory.
you need to install the font in your operating system as a usable font...
on windows this means put the "weather icons regular.ttf" file into the fonts folder (you can easily get to it from the control panel).
after that just use the unicode hex codes for what you want to display, and tell the widget to use the font you installed.... the codes and associations for various weather apis are in the "values" folder of the "weather-icons-master" folder, under the weathericons.xml
for python 3.6
from tkinter.font import font
...
weather = Font(family="weather icons regular")
fontsize = 20
...
example = Button(master, text="\uf01e,\uf01e,\u...", command=some_def)
example.configure(font=(weather, fontsize), fg="white", bg="black")
example.pack()
obviously you can adjust your font and widget styling the way you want it to look...
On my page, Fontawesome icons (for example the two one of the extreme top right of the page) don't work any more, despite the fact that the vendor CSS is indeed loaded. Here's how it is loaded from my CSS file:
#import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
Any idea why it's not working?
In http://pizzaontime.fr/new/wp-content/themes/pot/dist/styles/main.css you are including font files for FontAwesome locally. The link relative link starts with ../fonts/, so it should be in here: http://pizzaontime.fr/new/wp-content/themes/pot/dist/fonts/, but there is no FontAwesome font file.
Yes, you are including the *.css file, but you will have to place the font files in the same structure the FontAwesome CDN is organising them.
Edit with more details on how to fix it:
First approach (fastest and easiest way): Include the css file in your HTML (<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">). Remove your include in your CSS file then.
Second approach: Place the missing font files in http://pizzaontime.fr/new/wp-content/themes/pot/dist/fonts/. You can find them here.
I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.