CODEWITHSUNDEEP
htmlcssunicodefontsicons
hidar
hidar

Reputation: 5939

How show simple icons with only css

Is it possible to render icons (web safe, if they exist) to show an icon on a page without relying on specific fonts?

for example, if you have fontawesome font this will render an icon

a:before {
    font-family: FontAwesome;
    content: "\f095";
}

So, my question is, is there a font type that is websafe which I can replace \f095 code?

Upvotes: 1

Views: 696

Answers (2)

BSK
BSK

Reputation: 743

If you can get the SVG's you need, you can create your own websafe icon font with https://icomoon.io/app/, or http://fontastic.me/, or http://fontello.com/, etc. Be sure to use Private Use Area (PUA) codes for the icons when exporting the font.

Upvotes: 2

SpaceBlade387
SpaceBlade387

Reputation: 46

You can try to use the Unicode Icons as an alternative. Just need to find out the HTML-Code for your specific Icon. Here is an example for the telephone Icon:

<p>&#9743;</p>

Here is a link to a site which shows you the HTML-Code for each Unicode Icon:

https://unicode-table.com/en/

Upvotes: 3

Related Questions