How to add an icon to an HTML element using before pseudo class in CSS

In this article, I'll cover all the different ways of doing this

By: Ajdin Imsirovic 23 August 2021

Adding an icon using the before CSS class

1. Using HTML entities and the before pseudo-class

This one is probably the easiest and the most straightforward approach, we’re only adding a CSS class to our HTML:

<div class="quote-icon">
    .
    .
</div>

And we’re using the HTML entity with the content notation. Here’s an example with the double quote html entity:

.quote-icon::before {
    content: "\201D";
    position: absolute;
    top: 0;
    left: 0;
    font-size: 230px;
    color: yellowgreen;
    font-family: Arial, sans-serif;
    line-height: 0.6;
}

That’s all there is to it. Pretty easy stuff.

2. Using a CSS.GG icon

Here’s the original code from the website:

.gg-code-climate {
    display: block;
    box-sizing: border-box;
    position: relative;
    transform: scale(var(--ggs,1));
    width: 24px;
    height: 16px
}
.gg-code-climate::after,
.gg-code-climate::before {
    content: "";
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 12px;
    border-left: 4px solid;
    border-top: 4px solid;
    transform: rotate(45deg)
}
.gg-code-climate::before {
    height: 12px;
    left: 2px;
    bottom: -2px
}
.gg-code-climate::after {
    height: 6px;
    right: 0;
    bottom: 6px
}

Of course, these are not quote icons per se, so we’re going to need to customize the above css code.

3. Embedding a base-64 encoded SVG as the backgound for the CSS class’ pseudo-selectors

This one is a bit interesting and yields great results.

Here’s a sample code for a shopping cart using the base-64-encoded SVG as the background:

.cart-icon::before {
    display: block;
    background-image: url("data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNNS43OTE2NiAySDFWNEg0LjIxODRMNi45ODcyIDE2LjY3NzZIN1YxN0gyMFYxNi43NTE5TDIyLjE5MzIgNy4wOTA5NUwyMi41MzA4IDZINi42NTUyTDYuMDg0ODUgMy4zODg1Mkw1Ljc5MTY2IDJaTTE5Ljk4NjkgOEg3LjA5Mkw4LjYyMDgxIDE1SDE4LjM5NzhMMTkuOTg2OSA4WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBkPSJNMTAgMjJDMTEuMTA0NiAyMiAxMiAyMS4xMDQ2IDEyIDIwQzEyIDE4Ljg5NTQgMTEuMTA0NiAxOCAxMCAxOEM4Ljg5NTQzIDE4IDggMTguODk1NCA4IDIwQzggMjEuMTA0NiA4Ljg5NTQzIDIyIDEwIDIyWiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBkPSJNMTkgMjBDMTkgMjEuMTA0NiAxOC4xMDQ2IDIyIDE3IDIyQzE1Ljg5NTQgMjIgMTUgMjEuMTA0NiAxNSAyMEMxNSAxOC44OTU0IDE1Ljg5NTQgMTggMTcgMThDMTguMTA0NiAxOCAxOSAxOC44OTU0IDE5IDIwWiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgo8L3N2Zz4=");
    background-repeat: no-repeat;
    transform: scale(2);
    position: relative;
    top: 14px;
}

To encode the SVG information, I used the base64encode.org website.

The somewhat tricky part is copying the exact string you need.

Feel free to check out my work here: