Help with FlatIcon

I attempted to make a temporary icon using FlatIcon fonts, but I’m having trouble. I want it to look like it does at http://wearabletechforums.com:

But when I tried to recreate the logo using an actual font file rather than an image, I couldn’t configure the color or size. I can only get it to look like this:

How do I configure the font so that it displays correctly?
Thank you.

is it live on page we can look at?
i have been playing w/fontawesome. there seem to be primalry two ways to add and edit the font.
as in inline

adding the link in the html & the style in the css.  & edit like a font
.fa.fa-arrows-v{
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: 25px;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	cursor:pointer;
}

or trough the css entirely.
Not sure how similar is your experience or how you added the icon.

I used a simple tag. But it’s FlatIcon, not FontAwesome.

The problem was that when I styled the tag, it didn’t seem to affect the font.

I don’t have a live version, but it was simply an tag in place of the tag as the logo at http://wearabletechforums.com

HI,

Looking at the documentation from flaticon and assuming you have downloaded it as an icon font then you could change it like so:

.glyph .flaticon-jumping28:before {
font-size: 164px;
color: green;
}

Adjust size and colour to suit (and check that jumping28 matches your icon code).

What Paul said of course,
The little logo on the site a gif. but the icon you created should be styled as a font would be.
with color & font-size.
D

Hm, yes. That’s what I did, but there must be some other style interfering. I’ll try again.

If you give us a website, we can try to identify it. We can help :slight_smile:

Okay, I got rid of the gif and tried to use FlatIcon. http://wearabletechforums.com
Also, PaulOB I’m not sure why you have the class “glyph” or what “:before” means, but I added those attributes in my tag. Take a look.

As you can see, the icon is still small and now purple—not green. Increasing the size seems to increase the padding around the icon, but not the icon.

Thanks.

Ok the code isn’t even applying the styles since the <i> has the class glyph AND flaticon-jumping28. Pauls code assumes that .glyph is a parent element. Change Pauls code to this. Copy and replace. Do nothing else

From this:

.glyph .flaticon-jumping28:before {
font-size: 164px;
color: green;
}

To this

.glyph.flaticon-jumping28:before {
font-size: 164px;
color: green;
}

Thank you very much! I was able to configure it properly this time. Do you mind explaining why you applied a glyph class, and what :before means? According to the instructions here, no glyph class is necessary. http://www.flaticon.com/iconfont-demo

Then just remove the glyph class :slight_smile: . It isn’t doing anything. I locally removed the glyph from CSS and the HTML and it didn’t break anything. I haven’t read through the thread to see why Paul did that.

:before is a pseudo element. In order for the content property to work (which is what holds the image of the picture (the flaticon file), it needs to be put on the pseudo element :before or :after . So it holds that file in the content property, and then the font size and color and everything are set on that element as well.

:before is basically creating a pseudo element you can manipulate.

Thank you. Now I changed the fonticon, and it disappeared. Why isn’t this one working?

I see no content property that loads the flaticon file. Are you sure you did it right?

I just reverted the class back to .flaticon-jumping28 (what it was before) and it’s not even working with that. What did you change?

I removed the jumping28 files from the server, since I switched it out. I just replaced them with the pin56 files.

@font-face { font-family: "Flaticon"; src: url("/styles/flaticon/flaticon.eot"); src: url("/styles/flaticon/flaticon.eot#iefix") format("embedded-opentype"), url("/styles/flaticon/flaticon.woff") format("woff"), url("/styles/flaticon/flaticon.ttf") format("truetype"), url("/styles/flaticon/flaticon.svg") format("svg"); font-weight: normal; font-style: normal; }

I open up your CSS font file and jumping and pin aren’t even defined there. Did you edit that file? Redownload that file. It’s missing some classes.

Got it. Thank you, and sorry for the troubles!

It’s not a problem :slight_smile: . Everyone who frequents these forums are here because we love helping people. Come back if any more issues arise.

When you download the font-icon you are given css and html to work with and the html you are give is this:

<div class="glyph">
		<div class="glyph-icon flaticon-jumping28"></div>
</div>

I assumed you would be using the html that they supplied rather than inventing your own :smile:

The :before pseudo element is a way of adding generated content to the html and is used by most of these font-icon examples and simply adds the character code which refers to the icon in the font set.