I'm the dev of www.xlent.se and if you try to load the page in IE or FF you'll notice that all icons are replaced by "hex blocks".
The problems only appeared after migrating the project from the development server to the production server. I'm not sure if it's due to caching or MIME-types or something else.
According to your comment it seems that your server doesn't send the right headers.
You could solve this by adding the following to your .htaccess file:
<FilesMatch ".(ttf|otf|eot|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
If you load the files (bootstrap and font-awesome) from a CDN and not from your server use the following:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
Also make sure that you don't load font-awesome multiple times.
Your minified CSS already contains the font-awesome and bootstrap.
Related
I'm making a site page. Everything is wonderful, I tested it on my iPhone with local server. Everything worked well, but when I uploaded it to my hosting, it works well on desktop, but when I open it on my iPhone 13, it looks terrible. It looks like html file isn't linked with css file.Site on local server Site on hosting(Safari)
I tried to change some css settings
This is probably due to the way your files are served on your local server
When you are testing your site on your local server, the HTML and CSS files are served from the same origin and the browser can load them without any issues. However, when you upload your site to your server on your iPhone, the HTML and CSS files may be served from different origins and the browser may block the CSS file from loading.
Try this:
<link rel="stylesheet" href="styles.css" crossorigin="anonymous">
I am having a weird problem.
I am trying to build my github page site. So I am writing my html locally and then push it online to see it.
The problem is that Chrome doesn't recognize my css file when I am opening it locally. When I push the changers online or I am using another browser it work just fine
Here is how I import it on my index.html file:
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
And when I go to the chrome dev tools
css have turned to chinese
Microsoft edge load the css file normally.
I have tried a couple of different things like:
Using another editor
Creating the file in different directory
trying different filenames
Clearing Chromes Cache
Nothing seems to work
I have loaded again a local a site like this and it worked fine.
Any ideas?
Make sure the file encoding is UTF-8. You can use iconv or just in your text editor > save as.
I have got a website built in CakePHP and hosted on http://thecontrolist.azurewebsites.net. I am using git to update this website. I am using Coco theme which uses Fontello, Font-Awesome and a few other to create CSS icons in admin panel. When I pushed my work first time, the font's wont show on the live server however they show fine on my localhost/wamp server.
I thought there would have been some kind of file corruption while pushing font files through git. Hence I decided to upload font files in Fontello and Font-awesome using FTP. I hard refreshed and it worked. However, after some time it again stopped working.
I add the entire libs directory of the theme to gitignore list and uploaded all fonts in question using FTP once gitignore had been pushed. But it didn't fix the issue and fonts have stopped showing up again, so the gitignore didn't help. Any ideas what's going on?
Following the code:
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/theme/coco/libs/fontello/css/fontello.css" />
And you can view the files from linked. One thing I am very sure about is that when I reupload files using FTP and refresh it works but then it stops working automatically after some time so it does not seem like a font filepath issue.
Just don't use buggy fonts. Use more stable fonts like font-awesome.
I'm trying to use Font-Awesome icon fonts via the BootstrapCDN link which I'm pretty sure I have the latest version of:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
I've put this link in the <head> part of my html file and I am trying to get it to work with this simple html code of:
<!DOCTYPE html>
<html>
<head>
<title>Font-Awesome Icons</title>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<body>
<p><i class="fa fa-camera-retro"></i> Camera Icon<i class="fa fa-facebook"></i> Facebook Icon</p>
</body>
</html>
However it's not rendering. I've tried this code in the latest versions of FireFox (27), Safari(7) and Chrome(33). I've checked that the fa class is on each of the icons I'm trying to call up and also that the fa- prefix is being used as opposed to the old icon- prefix. I've checked my implementation of the code with this video http://headwaythemes.com/using-font-awesome-with-headway/ (although meant for a WordPress theme, in principal the code should work the same) and looked around on stack overflow but previous questions like Fontawesome not loading haven't yielded me any help in solving my issue.
I don't have the fontawesome.otf installed but surely it isn't that if I can see the glyphs when visiting http://fortawesome.github.io.
Should I just download and host the font-awesome files along with my entire future website so I don't have to worry about updating the BoostrapCDN link as well? - Even though I only plan to use a few icons?
The reason it is not loading is because the URI is starting with "//". That signifies that it is a protocol relative path, meaning it will use whatever protocol that page is using. If you open your html locally, then your browser will use file as the protocol, thus trying to access the font-awesome css with "file://". If you access your html using a local or remote http web server, then you would access the page using the http protocol, thus accessing the css with "http://".
Solution:
Change the path of the css or mimic it on your local machine.
Run a local or remote http server and access the page.
For more info:
URI starting with two slashes ... how do they behave?
Such an easier way to deal with this - just add 'http:' in front for the cdn line, and it will work on your local machine, i.e. like this:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
Ta-daa!
What Pulkit answered is absolutely correct. Just to add, if you want to create a quick local server, just go to the directory of the html and css pages, and then go to the terminal and type -
$python -m SimpleHTTPServer
Then, go to your browser and go to 127.0.0.1:8000
If it doesn't show up, try changing the homepage of your website to index.html
I am trying to make glyphicons work with my local project!
i have created a virtual host called backend.mvc
now when ever i try to use glyphicons i get the following error:
"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.woff"
glyphi...ar.woff
"NetworkError: 404 Not Found - http://backend.mvc/site/resources/css/fonts/glyphicons-halflings-regular.ttf"
however the path exists execpt from the http:// so my question is how can avoid this and make the glyphicons work?
edit
Ive added the following to my head:
<link type="application/font-woff">
<link type="application/vnd.ms-fontobject">
<link type="application/x-font-ttf">
<link type="font/opentype">
However this did nothing :(
Update
Using apache
Also please note that this is for web and NOT mobile!
If you're absolutely sure that they're not in the incorrect place, then the most common cause I come across for problems like this when it comes to serving web-fonts is that the server isn't configured to serve the correct mime-type for the files.
According to HTML5 boilerplate these are the mime-types that you should be using when serving web fonts:
woff: application/font-woff
eot: application/vnd.ms-fontobject
ttf & ttc: application/x-font-ttf
otf: font/opentype
The fonts directory should be in the same dir as the css directory by default, not in the css subdirectory
Also check your paths in the bootstrap.css