Custom Icon Fonts

HTML & CSS
1

Hi I have made an custom icon set but
the font is not showing: Page

I have the fonts in my font folder and the
@font-face css already in there.

@font-face {
	font-family: 'icomoon';
	src:url('impactograph.com/fonts/icomoon.eot');
	src:url('impactograph.com/fonts/icomoon.eot') format('embedded-opentype'),
		url('impactograph.com/fonts/icomoon.ttf') format('truetype'),
		url('impactograph.com/fonts/icomoon.woff') format('woff'),
		url('impactograph.com/fonts/icomoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
2

Hi there csosa,

in your CSS you have this…

.icon-shocklabelsicon-01:before {
    content: "\e904";
}

Change it to…

.icon-shocklabelsicon-01:before {
    font-family: 'icomoon';
    content: "\e904";
}

coothead

3

hmm that did not work

4

Your font files are returning 404. Check the file paths again.

You have this

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot') format('embedded-opentype'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

Which is calling files here…

And .svg, .woff, etc etc etc…All are 404.

5

Well, this is what I see/saw when applying the amended code…

493Ă—254 23.3 KB

…in Firefox.

Of course, other browsers may require the fonts
that “RyanReese” has already indicated. :ok:

coothead

1 Like
6

alright ill check that

7

it worked when I put it in my Style folder but I guess that is
by default how can I redirect it to go to my fonts folder?
should I say?
http://impactograph.com/fonts/icomoon.eot
but then that would not work on my local host right?

8

Add a / before your “fonts”.

That will tell it to look at the root directory.

I don’t develop locally, so I don’t know.

I guess, if you’re keeping the same structure, you could do something like this…

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot') format('embedded-opentype'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.