CODEWITHSUNDEEP
htmlcssfontsicons
Murphy1976
Murphy1976

Reputation: 1475

CSS Content and Icon Fonts - Where do you find the content value?

I'm using an icon font for some web design, and I'm having some trouble figuring out what to exactly put for the content value in my CSS.

I see in the already completed css that for certain icons, it employs the following:

.icon-facebook:before{
   content: '\ea8a';
}

Which is all fine and dandy, but I want to change that icon to something else, the problem is, when I open up the font on my Mac's FontBook Application, and I hover over the same icon, I get the following data:

Glyph 336
U + E94F

Does anyone know HOW to look at a TTF Font and get the correct values that I can plug into a CSS file and have them display correctly?

UPDATE: After process of elimination, the CSS @font-face is calling a linked .SVG file, not a TTF. The @font-face currently looks like this:

@font-face {
  font-family: 'ifontello';
  src: url('files/fonts/fontello.eot?99886049');
  src: url('files/fonts/fontello.eot?99886049#iefix') format('embedded-opentype'),
       url('files/fonts/fontello.woff?99886049') format('woff'),
       url('files/fonts/fontello.ttf?99886049') format('truetype'),
       url('files/fonts/fontello.svg?99886049#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

So now the question is, how can I look at an SVG to obtain the content values that I would plug into a CSS file so that I can either create a stylesheet from scratch OR change the content values to display a different icon?

Upvotes: 2

Views: 11011

Answers (2)

Abbas Farahani
Abbas Farahani

Reputation: 11

I did Something Like That:

1- Download and Save The font on Your PC.
2- Install as a font.
3- Open Word!
4- Insert Menu -> Symbols
5- Change the font in symbol page
6- Choose your symbol (Don't Insert!)
7- below the window, Character code is the solution. (Be sure That code is UNICODE)

You can use this code (Character code) for CSS Content att.

Upvotes: 1

Murphy1976
Murphy1976

Reputation: 1475

EUREKA!

If you open an .SVG with your web browser and then VIEW PAGE SOURCE, you will see all the data you'll need to make this happen. each character will be listed as a GLYPH and in each GLYPH is an attribute called UNICODE.

If you view it in Web Developer tools is may just show up as a box, but by viewing the source code instead, I was able to see the value of that unicode.

For me, the value of that facebook icon was unicode="", which as you can see has the ea8a in it that I was looking for. By using that compare and then changing my CSS to hold a different unicode value, I am able to change the content to what I want.

Upvotes: 4

Related Questions