My pictos icons are working fine in desktop browsers, but not rendering on ios.
head
<link href="//get.pictos.cc/fonts/1895/1" rel="stylesheet" type="text/css">
header link HTML
<span aria-hidden="true" data-icon="H"></span>
Pictos CSS
[data-icon]:before {
font-family: 'Pictos Custom';
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
}
Pictos icons in chrome
Pictos icons in iOS
Related
drag_indicator is not included with the regular icons in material design. Should I somehow add it manually?
Following this guide I added the icons with the help of the following css:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("#{fontPath}/MaterialIcons-Regular.eot"); /* For IE6-8 */
src: local('Material Icons'), local('MaterialIcons-Regular'), url("#{fontPath}/MaterialIcons-Regular.eot?#iefix")format("embedded-opentype"), url("#{fontPath}/MaterialIcons-Regular.woff2") format('woff2'), url("#{fontPath}/MaterialIcons-Regular.woff") format('woff'), url("#{fontPath}/MaterialIcons-Regular.ttf") format('truetype'), url("#{fontPath}/MaterialIcons-Regular.svg") format('svg');
}
.grey-color {
color: #grey-color;
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-variant: 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;
text-rendering: optimizeLegibility;
/* 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';
}
Now I am able to use codes to embed some icons. E.g. the following markup piece works as expected (displays the move_vert icon):
<span class="material-icons">
</span>
While the following piece do not work:
<span class="material-icons">
</span>
It seems that I am not the only one experiencing the issue. Here is a similar thread. But it is not clear to what conclusion the thread led. So, the question is still relevant for being posted here.
It is included, maybe the problem is that your Material icons lib is downloaded locally (self-host web font) and it is old.
If you use fonts via Google-hosted Fonts, no problems occur.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<title>Example</title>
</head>
<body>
<i class="material-icons">drag_indicator</i>
</body>
</html>
Try to re-download Fonts, if it didn't help, you can also download WOFF2 file from the same source that google web hosting provides: WOFF2
Which included in this link: https://fonts.googleapis.com/icon?family=Material+Icons
My footer in Wordpress has a number of social icons, but Instagram is the only one that fails rendering properly (see attached image):
I have added the following for better font rendering:
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
And this is how the icon is defined in my style.css:
.icon-instagram:before {
content: "\e604";
}
What is the issue? I am very new to css icons, so I am not sure what the issue can be in this case.
Thank you,
EDIT1:
Font-family is defined as follows in my style.css:
[class^="icon-"], [class*=" icon-"] {
font-family: 'my-icons';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
You can use another font icon from here.
CSS : <link href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css" rel="stylesheet">
icon : http://www.socicon.com/chart.php
Facebook : class="socicon-facebook" \E041 • #3e5b98
Twitter : class="socicon-twitter" \E040 • #4da7de
Instagram : class="socicon-instagram" \E057 • #000000
Youtube : class="socicon-youtube" \E051 • #e02a20
For More Click Here
I have a web page that is using an icon font. This web page works fine in Chrome, Firefox, and Safari. It works fine in Edge and IE 11. However, I need to support IE 8, 9, and 10 as well. My problem is, that in IE 8, 9, and maybe 10, the icons don't appear. You can see the problem with this Bootply. In it, I have the following code:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<div class="container">
<ul class="list-inline">
<li><span class="material-icons">alarm_on</span></li>
<li><span class="material-icons">alarm_off</span></li>
</ul>
</div>
What makes this confusing is that I don't see any errors. I'm not sure what's wrong. I've also copied the font files locally from here. I've added the font files to my app in a folder called /resources/fonts. In my application's css file, I've added the following at the top:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/resources/fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('/resources/fonts/Material Icons'),
local('/resources/fonts/MaterialIcons-Regular'),
url(/resources/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(/resources/fonts/MaterialIcons-Regular.woff) format('woff'),
url(/resources/fonts/MaterialIcons-Regular.ttf) format('truetype');
}
While this works in Chrome, Firefox, and Safari, it still doesn't work in IE 8 or 9. What's wrong?
You should use different HTML for IE9 and lower. You can find it on the material icons website here for alarm_on and here for alarm_off.
So it should be:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<div class="container">
<ul class="list-inline">
<li><span class="material-icons"></span></li>
<li><span class="material-icons"></span></li>
</ul>
</div>
The font is supported in IE, but only IE versions 10 and for lower, you can use hexadecimal encoding.
Here it's example and it's work perfectly in IE9.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<i class="material-icons"></i>
<i class="material-icons"></i>
For more details you can check here
I'm trying to host the Google Material Design icon set for my website however I cannot get the icons to show in Chrome or Safari.
I'm using this CSS file:
#font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/public/dist/font/Material-Design-Icons.eot); /* For IE6-8 */
src: url(/public/dist/font/Material-Design-Icons.woff2) format('woff2'),
url(/public/dist/font/Material-Design-Icons.woff) format('woff'),
url(/public/dist/font/Material-Design-Icons.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
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';
}
Pulling in the file with:
link(rel="stylesheet", href="/public/dist/css/font.css")
Which I can see in the browser is loaded
The font itself is even loaded into the page, I can see the .woff file in the network tab on Chrome.
This is the public folder structure which is hosted 'as is' by the server
I'm using the font here (jade):
i.material-icons.prefix perm_identity
And I can see the CSS class above applied to that element
But the fonts don't render.
EDIT: People here having the same issue: https://github.com/google/material-design-icons/issues/205
This was caused by outdated icon fonts on the materializecss.com website, I used the ones off the Google GH repo and they worked sigh
Simply make use of google material design icons directly in your webpage.
You can find the details here https://google.github.io/material-design-icons/
I was able to fix this issue by using the google web font style sheet. It is much easier this way.. you can just include the style sheets in you webpage and all web font icon classes are loaded and you are good to go.
Simply add the below CSS link to your page and access material design icons by Google web fonts.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
And specify icon you want to use.
<span class="material-icons">face</span>
For more details refer to the Material icon documentation
I'm using a Google Webfont called Open Sans with font-weight:800 specified for h1 tags. When I view this page on iOS browsers (Chrome and Safari on iPhone or iPad), the font renders more thinly than it renders in desktop browsers. You can see the difference in this screenshot.
I want the font-weight to render the same on all devices, can anyone help me?
My code:
h1 {
font-weight: 800;
font-family: 'OpenSans'
}
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,600,800' rel='stylesheet' type='text/css'>
I believe you're missing a space here:
font-family: 'Open Sans'