Font ligature icons in Microsoft edge - html

I'm using google material Icon font library for the majority of icons in a web app. I've started debugging for Microsoft Edge and realised none of them are showing.
Is this a known issue? I can switch to actual icon images if need be but it would be a massive job at this stage.

Try to use F12 developer tools to check whether the Google Icons CSS reference load success.
The following code works well on Edge 42 and Edge 44 version:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
</style>
<i class="material-icons">face</i>
The output screenshot as below:

Related

unable to use fonts through CSS

I have this CSS file for the free google font. The font and help was downloaded, but I am not able to use them as intended. How can I use them for displaying Bold or, Italic or, regular text?
my css: fonts.css
/* anonymous-pro-regular - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: normal;
font-weight: 400;
src: local('Anonymous Pro Regular'), local('AnonymousPro-Regular'),
url('../fonts/anonymous-pro-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-regular.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-italic - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: italic;
font-weight: 400;
src: local('Anonymous Pro Italic'), local('AnonymousPro-Italic'),
url('../fonts/anonymous-pro-v11-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-700 - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: normal;
font-weight: 700;
src: local('Anonymous Pro Bold'), local('AnonymousPro-Bold'),
url('../fonts/anonymous-pro-v11-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700.ttf') format('truetype'); /* Safari, Android, iOS */
}
/* anonymous-pro-700italic - latin */
#font-face {
font-family: 'Anonymous Pro';
font-style: italic;
font-weight: 700;
src: local('Anonymous Pro Bold Italic'), local('AnonymousPro-BoldItalic'),
url('../fonts/anonymous-pro-v11-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/anonymous-pro-v11-latin-700italic.ttf') format('truetype'); /* Safari, Android, iOS */
}
.myFontNormal {
font-family: 'Anonymous Pro Regular';
}
.myFontBold {
font-family: 'Anonymous Pro Bold';
font-size: 15px;
}
When I try to use it in forms it does nothing. what am I missing?
e.g.:
<div id="main" class="myFontBold">
<p>Default Emb.1234567890.</p>
</div>
Use different font-family names in the #font-face rules to make it work - you have font-family: 'Anonymous Pro'; in all three! Add "Bold" and "Italic" to the second and third one.

Icon disappears in Bootstrap

I'm programming a website where I created 4 buttons that link to my social media profiles. I want to include the icon of the resp. social media on the button. I use the Mono Social Icons Font.
On this website you see what it should look like: http://cholleton.ch
This is the code I used:
<div class="col-md-3 col-sm-6 col-xs-6">
</div>
In main.css I added
#font-face {
font-family: 'Mono Social Icons Font';
src: url('../fonts/social/MonoSocialIconsFont-1.10.eot');
src: url('../fonts/social/MonoSocialIconsFont-1.10.eot?#iefix') format('embedded-opentype'),
url('../fonts/social/MonoSocialIconsFont-1.10.woff') format('woff'),
url('../fonts/social/MonoSocialIconsFont-1.10.ttf') format('truetype'),
url('../fonts/social/MonoSocialIconsFont-1.10.svg#MonoSocialIconsFont') format('svg');
src: url('../fonts/social/MonoSocialIconsFont-1.10.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.symbol, a.symbol:before {
font-family: 'Mono Social Icons Font';
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
-ms-text-rendering: optimizeLegibility;
-o-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.links {
font-size: 10vh;
text-align: center;
}
.linkedin {
background-color: #4488cc;
}
Thanks a lot for your suggestions!
Thomas
I think you just forgot to put the text in your link, like this :
circlelinkedin
See this fiddle
if you have the image set as a background image in your class then out a non-breaking space before your end </a> tag. If you want an image that is saved on your directory then use something like this
<img src="http://www.yourdomain.com/images/linkedin.jpg" alt="linked in">

custom font not showing properly using #font-face

After much review, I can't get the correct display of a custom font I created through fontsquirrel. Chrome's Inspector shows the icon is in place but all I get is this default icon box ;o(
Rails 4 app, Bootstrap
Any ideas?
application.rb:
config.assets.paths << Rails.root.join("app", "assets", "fonts")
html:
<div class="hatfont icon-balloon01"></div>
here's my CSS:
hatfont {
font-family: 'haticon';
text-transform: uppercase;
div {
font-family: haticon;
}
}
#font-face {
font-family: 'haticon';
src:assets-url('fonts/haticon.eot');
src:assets-url('fonts/haticon.eot?#iefix') format('embedded-opentype'),
assets-url('fonts/haticon.woff') format('woff'),
assets-url('fonts/haticon.ttf') format('truetype'),
assets-url('fonts/haticon.svg#haticon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'haticon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-graphs:before {
content: "\e600";
}
I've had this issue before myself. I can't identify the problem specifically from what you've provided, but a few things come to mind. Check your link references in your CSS. Make sure no files were moved and that your stylesheet is in the same directory as your fonts folder. Also, the %> under your font-face looks out of place... I don't know if that's a Rails thing or not. Here's an example of something that I've used before that's worked. Obviously, you'd need to substitute your font files. :
#font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'),url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'),url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

Icons are cutted off in Chrome (only on OSX)

I have a problem with my custom iconfont in Google Chrome, only on Mac. They are cutted off at the edge. I already tried to
use greater svg's and
prefer the SVG (before woff)
play with css settings
You can see it live at kuyichi.com (if you have Chrome and OSX)
The icons don't have a border, the roundings are with the icons itself.
Is there anybody how to fix this?
live view:
http://i.stack.imgur.com/niqcP.png
the iconpack on icomoon:
http://i.stack.imgur.com/PwyCm.png
#font-face {
font-family: 'iconfont';
src:url('fonts/iconfont.eot?nr90fm');
src:url('fonts/iconfont.eot?#iefixnr90fm') format('embedded-opentype'),
url('fonts/iconfont.woff?nr90fm') format('woff'),
url('fonts/iconfont.ttf?nr90fm') format('truetype'),
url('fonts/iconfont.svg?nr90fm#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icons-"], [class*=" icons-"] {
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icons-knit:before {
content: "\e628";
}
Try adding size information to your icon delcaration:
.icons-knit:before {
content: "\e628";
width:40px;
height:40px;
font-size:20px;
}

Which file is needed by modern browsers with font-awesome? [duplicate]

This question already has answers here:
Why should we include ttf, eot, woff, svg,... in a font-face
(3 answers)
Closed 9 years ago.
I have the following in my LESS/css file:
#font-face {
font-family: 'FontAwesome';
src: url('/Content/font-awesome/fontawesome-webfont.eot?v=3.0.1');
src: url('/Content/font-awesome/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('/Content/font-awesome/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('/Content/font-awesome/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="fa-icon-"],
[class*=" fa-icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
display: inline;
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
}
My application works and shows icons correctly but I am confused about which of these files will be used. I am using all modern browsers IE9, lastest Chrome, Firefox and Safari.
We add font in different formats because every browser has its own way of rendering fonts so font in different formats are included.