Hello everyone,
I was wondering how content code are generated .I was looking at font-awesome icon and noticed the they have 'content' property on pseudo elements.
If i create one custom icon ,how create code for it.
For example Here is the css for fa-file-image-o in font-awesome.
.fa-file-photo-o:before, .fa-file-picture-o:before, .fa-file-image-o:before {
content : '"\f1c5"
}
How does this code is generated.
If any one can explain.
Thanks
It's a quite old property of CSS. You can use it to add some text into somewhere in the web page. Note that, it's only available within :before or :after block. For example, here is CSS:
.username:before {
content: "Username: ";
font-weight: normal;
font-style: italic;
}
.username {
font-weight: bold;
}
And HTML:
<span class="username">alice</span>
So now, the text "Username: " will display before the input even there is no that text within HTML source code:
https://jsfiddle.net/wyv0m4y4/0
How about the special characters? Sometimes you may want to add the unicode icon instead of pure text. Just use hexa value:
https://jsfiddle.net/wyv0m4y4/1/
Do you see it start with a "\" and then the numbers?
For more hex code:
Dong Nguyen
Web Developer
Alkshendra Maurya
Frontend Engineer | Hashnode Alumnus
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 afont-family: fontawesome;getting applied to it, which shows the character as an icon font in the frontend.