CODEWITHSUNDEEP
htmlcssmaterial-designfrontendweb-frontend
Software Monster
Software Monster

Reputation: 41

css fallback for material icons

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?

Upvotes: 2

Views: 1968

Answers (2)

Allan
Allan

Reputation: 2939

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

Upvotes: 1

ESP32
ESP32

Reputation: 8728

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

Upvotes: 0

Related Questions