CSS image content: '\f035';

Question

I was just looking through the source of github.com's page and I saw them use some code for their add to clipboard button icon

.octicon-clippy:before {
      content: '\f035';
}

How can this create an icon without a path to an image?

http://fortawesome.github.io/Font-Awesome/, http://astronautweb.co/snippet/font-awesome/ — MLeFevre, Mar 16 '15 at 12:26

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

f035 is an escape sequence and is rendered as a single character. My guess is they use icon font technique.

edited May 23 '17 at 12:24

Community

answered Mar 16 '15 at 12:28

Paul Kozlovitch

score 1 · Accepted Answer · answered Mar 16 '15 at 12:43

I'm not sure if you are familiar with font-awesome, but it too uses unicode characters to create icons. Check this out.

After you save the font-awesome stylesheets...etc. to your project you can insert an image icon as simple as:

<i class="fa fa-camera-retro"></i>

EDIT

You mentioned a clipboard icon, well here is how simple it would be with font-awesome:

<i class="fa fa-clipboard"></i>

2 Answers2