metroUI css displaying icons as control characters

Question

I'm using Metro UI CSS, but icons are shown as control characters. I've added charset=utf-8" to head section and added AddDefaultCharset utf-8 to httpd.conf. Still the problem persist.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Please help. Thanks in advance.

score 1 · Answer 1 · answered Mar 01 '14 at 14:43

I had the same issue. Turned out I forgot to copy the font files to the fonts directory. metro-bootstrap.css references the fonts:

@font-face {
  font-family: 'iconFont';
  src: url('../fonts/iconFont.eot');
  src: url('../fonts/iconFont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconFont.woff') format('woff'), url('../fonts/iconFont.ttf') format('truetype'), url('../fonts/iconFont.svg#iconFont') format('svg');
  font-weight: normal;
  font-style: normal;
}

So they need to be put in the appropriate directory relative to metro-bootstrap.css. If you download Metro-UI-CSS-master.zip, the fonts can be found in the fonts directory.

score 1 · Answer 2 · answered Mar 16 '17 at 07:46

Solution:

Locate your Font directory and allow permission. (*.eot; *.woff; *.ttf; *.svg). And take note of the location.
Edit your metro-icons.css, and put the correct path of the font directory. (I use the browser inspection to check my path is correct)
Refresh your browser.

score 0 · Answer 3 · answered Aug 08 '13 at 06:03

0

If you are using <!DOCTYPE html> as your doctype, I suggest you to try this.

<meta charset="utf-8">

instead of

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

I hope this solves your issue.

answered Aug 08 '13 at 06:03

Nitesh

15,425
4
48
60

Do you have a live link for this issue? Or can you provide your code and create a jsFiddle for it? – Nitesh Aug 08 '13 at 06:12
Page is on intranet so i can't share the link. please try the jsfiddle link above – Paul Varghese Aug 08 '13 at 06:33

score 0 · Answer 4 · edited May 23 '17 at 12:32

You need both the external set of css (metro-bootstrap.css) as well as class="metro"... Here's a working copy: http://jsfiddle.net/67T6c/

<link href="css/metro-bootstrap.css" rel="stylesheet">

<div class="metro">
<i class="icon-home"></i>
</div>

also note that this works in Chrome. However, in IE, you may be limited by the wonderful cross-origin-web-font block. See THIS for details on that: IE9 blocks download of cross-origin web font

score 0 · Answer 5 · answered Aug 29 '14 at 14:02

You must also be sure that your web server does not block files download with the extensions required for the font. These are: eot; ttf; woff; svg

I had the same problem and I could not in any way solve the problem of the icons. I later discovered that the problem was due to the web server used for development, Delphi DataSnap stand-alone mode, because of filtering these extensions so these files where not returned to the browser.

For Delphi DataSnap the solution is:

Go to WebModuleUnit
Select WebFileDispatcher1
Dbl-click on WebFileExtensions property and add the file extensions required.

metroUI css displaying icons as control characters

5 Answers5