Font ligature icons in Microsoft edgeHow to add some non-standard font to a website?Can I embed a custom font in an iPhone application?Icon font is not displayed at Windows Phone devicesFavicon NOT working on EdgeGoogle material icon font - Guide for full browser support?Fonts not showing up in Microsoft EdgeAvoid google crawl or index font text in ligatures to show in sitelinksCSS font-spacing issue with Calibri and the letters “ti”Using SVG Fragment Identifiers for background images in css with Microsoft Edge 42 (17134)
Can European countries bypass the EU and make their own individual trade deal with the U.S.?
"I am [the / an] owner of a bookstore"?
Is ALTER TABLE ... DROP COLUMN really a metadata only operation?
Copy group of files (Filename*) to backup (Filename*.bak)
If I were to build a J3 cub twice the size of the original using the same CG would it fly?
Is it okay to submit a paper from a master's thesis without informing the advisor?
When was this photo of Mission Dolores *actually* taken?
What is the Japanese name for the conventional shoelace knot?
Sentence editor
if a USA citizen marries a foreign citizen who has kid from previous marriage
Have any large aeroplanes been landed — safely and without damage — in locations that they could not be flown away from?
Do home values typically rise and fall consistently across different price ranges?
How to describe POV characters?
Knight's move in chess.
Head on collision of two black holes
By RAW, how can Prestidigitation create sound?
I just started should I accept a farewell lunch for a coworker I don't know?
On what to compliment someone with anorexia in order to improve their body image?
Adjective for 'made of pus' or 'corrupted by pus' or something of something of pus
Checkmate in 1 on a Tangled Board
Are Valenar elves and Aereni elves different races of elves?
How do I ensure my employees don't abuse my flexible work hours policy?
Can a successful book series let the bad guy win?
The Football Squad
Font ligature icons in Microsoft edge
How to add some non-standard font to a website?Can I embed a custom font in an iPhone application?Icon font is not displayed at Windows Phone devicesFavicon NOT working on EdgeGoogle material icon font - Guide for full browser support?Fonts not showing up in Microsoft EdgeAvoid google crawl or index font text in ligatures to show in sitelinksCSS font-spacing issue with Calibri and the letters “ti”Using SVG Fragment Identifiers for background images in css with Microsoft Edge 42 (17134)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;
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.
html fonts microsoft-edge ligature
asked Mar 25 at 14:53
india_tangoindia_tango
82 bronze badges
add a comment |
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.
html fonts microsoft-edge ligature
asked Mar 25 at 14:53
india_tangoindia_tango
82 bronze badges
add a comment |
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.
html fonts microsoft-edge ligature
asked Mar 25 at 14:53
india_tangoindia_tango
82 bronze badges
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.
html fonts microsoft-edge ligature
html fonts microsoft-edge ligature
asked Mar 25 at 14:53
india_tangoindia_tango
82 bronze badges
asked Mar 25 at 14:53
india_tangoindia_tango
82 bronze badges
edited Mar 25 at 15:45
india_tango
asked Mar 25 at 14:53
india_tangoindia_tango
82 bronze badges
asked Mar 25 at 14:53
india_tangoindia_tango
82 bronze badges
asked Mar 25 at 14:53
india_tangoindia_tango
82 bronze badges
82 bronze badges
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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:
answered Mar 26 at 1:57
Zhi Lv - MSFTZhi Lv - MSFT
1,5291 gold badge3 silver badges6 bronze badges
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55340580%2ffont-ligature-icons-in-microsoft-edge%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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:
answered Mar 26 at 1:57
Zhi Lv - MSFTZhi Lv - MSFT
1,5291 gold badge3 silver badges6 bronze badges
add a comment |
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:
answered Mar 26 at 1:57
Zhi Lv - MSFTZhi Lv - MSFT
1,5291 gold badge3 silver badges6 bronze badges
add a comment |
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:
answered Mar 26 at 1:57
Zhi Lv - MSFTZhi Lv - MSFT
1,5291 gold badge3 silver badges6 bronze badges
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:
answered Mar 26 at 1:57
Zhi Lv - MSFTZhi Lv - MSFT
1,5291 gold badge3 silver badges6 bronze badges
answered Mar 26 at 1:57
Zhi Lv - MSFTZhi Lv - MSFT
1,5291 gold badge3 silver badges6 bronze badges
answered Mar 26 at 1:57
Zhi Lv - MSFTZhi Lv - MSFT
1,5291 gold badge3 silver badges6 bronze badges
answered Mar 26 at 1:57
Zhi Lv - MSFTZhi Lv - MSFT
1,5291 gold badge3 silver badges6 bronze badges
1,5291 gold badge3 silver badges6 bronze badges
add a comment |
add a comment |
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Got a question that you can’t ask on public Stack Overflow? Learn more about sharing private information with Stack Overflow for Teams.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55340580%2ffont-ligature-icons-in-microsoft-edge%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
