Comment by Alkshendra Maurya on "How do icon-fonts generate CSS 'content' code?" | Hashnode

Alkshendra Maurya

Frontend Engineer | Hashnode Alumnus

Mar 2, 2017

The code you're referring to are Unicode characters, font-icon libraries(like fontawesome) use custom codes from the Unicode private use area range.

Icon-font libraries select the codes this range and map them with icon glyphs in their font file, so when you're writing an icon code like this content: "/f1c5"; there's also a font-family: fontawesome; getting applied to it, which shows the character as an icon font in the frontend.

anil kumar chaudhary

Impossible is I m possible.

Mar 2, 2017

Thanks Alkshendra Maurya .It means if i will use two font libraries. There are possibilities of conflicts as the number of these area is limited.

Why the conflict does not happen then??

Well, if you do end up using two libraries(which, I don't know why someone would do) and they somehow use the codes, it would look something like this:

<i class="icon1"></i>
<i class="icon2"></i>

CSS

.icon1:before {
    font-family: fontawesome;
    content: "\f000";
}
.icon2:before {
    font-family: someiconfont;
    content: "\f000";
}

Both the elements would have a different font depending on the library, and thus, will display different icons.

Search Hashnode