2

Browsers like Firefox on Android give their user the ability to manually disable web fonts which basically means web fonts will not be downloaded. I am using the material design tick mark for rendering check mark inside a design.

The css looks like

font-family: 'Material Icons';
content: "done";

Is there a way to give a fallback for this content?

Improve this question

2 Answers 2

Reset to default
1

Could you use the Unicode tick mark?

http://graphemica.com/%E2%9C%94

content: "\2714"; or content: "✔";

If you worried that there is no Unicode support - I think having a text message like "done" or using an image would work.

Update:

If you are worried about people blocking fonts - then use the PNG Sprites: https://github.com/google/material-design-icons/tree/master/sprites

Improve this answer
2
  • I am trying to use the material icon - "done" . The way I am doing this is working absolutely fine for all browsers and screens except for browsers where people have manually disabled downloading web fonts.
    – Software Monster
    Commented May 1, 2017 at 15:23
  • 1
    If you can't use a font then download / use the SVG or PNG version
    – Allan
    Commented May 1, 2017 at 15:25
0

You could try this solution from github. It uses jQuery to replace the font icons with background-images: http://dfcb.github.io/iconfont-fallback/

Another possibility would be to use SVG sprites: http://maddesigns.de/svg-sprites-icon-fonts-2309.html

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.