CODEWITHSUNDEEP
htmlcssfonts
xong
xong

Reputation: 350

Embed a symbol from a custom font

maybe this question is too easy, but I couldn´t find anything helpful.

I know how to define a custom font in a CSS file by @font-face. What I don´t know is how I can find out which code I have to use to display a certain symbol.

To make my request clearer I can give you a simple example: How can I display the second snoopy icon from this font on a webpage? http://de.fontriver.com/font/snoopy_dings/

And how do you find out the code for a certain symbol?

Thank you for your efforts, Robert

Upvotes: 1

Views: 408

Answers (3)

Chathura Buddhika
Chathura Buddhika

Reputation: 2195

First of all you need to find out the relevant letter that maps to your symbol. for that download that font and install it to your computer, open up a word processor and use insert symbol feature. So you can find the relevant English letter. Lets say it is "L".
Then you just type L in HTML and set the font through CSS.
for your problem, it is "B" so to display the second snoopy icon from this font on a web page you need code below.

HTML

<span class="snoopy">B</span>

CSS

.snoopy{
   font-family: "Snoopy Dings";
}

Upvotes: 1

Damien
Damien

Reputation: 1217

Unless you have a alphabetic chart there's no easy way to find out what icon is linked to what other letter. The easiest solution is to just type out the letters in that font and see what pops up.

There's actually an option in the site to try each letter (under Probefahrt). That gives you an input in a normal font and outcome in the custom font.

Custom font Snoopy Dings

Upvotes: 0

Olivier
Olivier

Reputation: 108

I guess your symbol is a letter, but the font is so weird that it doesn't look like a letter. Use you font and try to write the B letter. It should be your Snoopy icon.

Upvotes: 0

Related Questions