How to add background icon icomoon inside CSS file?

Forum Moderators: not2easy

Message Too Old, No Replies

How to add background icon icomoon inside CSS file?

toplisek

3:38 pm on Jan 29, 2015 (gmt 0)

How to add background icon icomoon inside CSS file?

Sample:

.myliststyle li {
content: "\iz10";
background-size: 19px 19px;
font-weight: normal;
list-style-type: none;
}

How is possible that it is not seen background image in the old style like:

.myliststyle li {
background: url("../images/iconsQ1.png") no-repeat left center;
background-size: 19px 19px;
font-weight: normal;
list-style-type: none;
}

[edited by: incrediBILL at 1:05 am (utc) on Feb 2, 2015]
[edit reason] added [CODE] formatter [/edit]

not2easy

6:10 pm on Jan 29, 2015 (gmt 0)

"\1z10"

has a URL you could use

content: url(" ");
background-size: auto;

but as used here

"\iz10"

is a string that will appear as text on the page where you want the icon, probably as

"iz10"

only.

lucy24

6:59 pm on Jan 29, 2015 (gmt 0)

How is possible that it is not seen background image

It would be much more surprising if it did have a background image, since the new CSS doesn't specify one. Only the old CSS did.

Incidentally, using relative URLs in stylesheets is perilous. It's fine so long as the page and CSS always live in the same directory. But otherwise you're much safer using a site-absolute URL beginning in / slash.

toplisek

8:48 pm on Jan 29, 2015 (gmt 0)

I have to test. As I understand it will work
li:before {

not2easy

9:59 pm on Jan 29, 2015 (gmt 0)

I did a quick search on the web for "icomoon" because I've not used it or seen it used. I see it is a popular free glyphicon svg font available from github, you would need to download, install and reference the font in your css to be able to use it. I suggest that you do the same search or visit the github repository for the font and its instructions if you want to use it.

I also read that you will need to find a fix that's out there for IE8 and lower if your visitors don't all use modern browsers. Not that we don't want to help, but this is a question that is more about webfont usage troubleshooting than css.