Using CSS pseudo elements (`:before` and `:after`) to display SVG icons that can be easily re-used and self-hosted

Exploring Self-Hosting Static Assets

After coming across an article about the risks of using CDN's or external infrastructure for hosting static assets, I started considering self-hosting fonts and icons myself.

I know you can self-host fonts by downloading them and using the file path as a URL in your CSS. Similarly, you can create or download an SVG for an icon and use it as an HTML element.

Inquiry

However, I am curious to know if it is possible to use a self-hosted SVG in a CSS pseudo-element like in the content property :before and :after. This is similar to how Font Awesome allows mentioning content code for their icons.

My goal is to reuse the same SVG in multiple CSS classes.

htmlcsssvgpseudo-elementself-hosting

Answer №1

Indeed, data URIs can be utilized for this purpose by incorporating them into the background or content property.

.icon::before {
  display: inline-block;
  content:'';
  width: 24px;
  height: 24px;
}

.icon-menu::before {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
<!doctype html>
<html>
    <head>
        <title>Web Developer</title>
    </head>
    <body>
        <div class="icon icon-menu"></div>
    </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent clicking on a specific column in a table using Jquery

Attempting to utilize Jquery for clicking on a table row in order to navigate to a new page. However, encountering an issue with the last column containing a button that redirects to a new page when clicked on the edge. Is there a way to disable the oncl ...

javascripthtmljqueryjsp

Is the ng bootstrap modal within Angular failing to show up on the screen

In the midst of working on my project, I encountered an issue with opening a modal using ng bootstrap. Although I found a similar thread discussing this problem, it did not include bootstrap css. I decided to reference this example in hopes of resolving t ...

cssangularng-bootstrap

Convert PHP code into an HTML table

Is it possible to insert date values into an HTML table column using the following code? <?php $startdate = strtotime("Monday"); $enddate = strtotime ("+3 weeks", $startdate); while ($startdate < $enddate) { echo date("M d", $startdate),"& ...

phphtml

Having trouble with an AJAX request to display a template in Flask

Imagine having two radio buttons labeled 1 and 2, along with some text at the bottom of a webpage. Initially, the text value is set to -1 and no radio buttons are selected. If one of the radio buttons is clicked, the text value should change to either 1 or ...

javascriptpythonjqueryhtmlflask

Social media comments widget

Currently, I am incorporating the Facebook XML to implement a Facebook comments plugin within my MVC 3 application in the following manner: <fb:comments href="@Request.Url.AbsoluteUri" num_posts="15" width="900"></fb:comments> The issue lies ...

jquerycssasp.net-mvcfacebookasp.net-mvc-3

Is there a way to retrieve all div elements within a specific div using webdriver and selenium?

As a newcomer to the world of web scraping, I am currently working on scraping a website in order to extract all elements with the data-feature-id=homepage/story. My ultimate goal is to access a subelement within each of the divs contained in the parent el ...

pythonhtmlweb-scrapingselenium-chromedriver

Problem Alert: Click Event Not Functioning on Generated Links

Take a look at these two code snippets. Despite other jQuery functions in the same JS file working fine on the UL element, nothing seems to be happening with these. Is there something obvious that I am missing? <ul id="activityPaganation" class="paga ...

javascriptjqueryhtml

Bootstrap4: Is it possible to wrap text on mobile screens when "col-12" is too wide?

I am currently utilizing Bootstrap4 for creating grid systems. Specifically, I am using col-12 for mobile screens and col-md-6 for laptops. However, I have encountered an issue where the first image appears too large on mobile phones and the text extends b ...

htmltwitter-bootstrapbootstrap-4

I am attempting to utilize Ajax in order to transfer information to a different webpage

It's a bit complex and I can't figure out why it's not working. My goal is to create a page with textboxes, dropdown lists, and a datagrid using easyui. The issue arises when I select something from the dropdown list - I want two actions to ...

javascriptphpjqueryhtml

The Navigation Bar is positioned too distant towards the Right side

Update: The issue has been resolved. Thank you for the assistance. I'm facing a problem with my navigation bar on my website. I can't seem to get it to span the entire width of the page while staying centered. The navigation bar is sticky and fu ...

javascriptjqueryhtmlcss

Thymeleaf: Automating the Adjustment of Content Fragments

In my project using Spring MVC and Thymeleaf, there is a default fragment that sets up the page structure. Here's what it looks like: <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/ ...

csshtmlthymeleaf

The battle between "this" in HTML and AngularJS ng-model

We have been working on updating an old ColdFusion application that utilized "this" with a formatting function: <td>$<input type="text" name="txtTaxProration" id="txtTaxProration" value="0.00" alt="Tax Proration" onblur="dollarBlur(this);">< ...

htmlangularjs

What is the function of typekit.com and how does it utilize @font-face technology

What is the functionality of typekit.com? Several websites similar to typekit enable CSS designers to utilize custom fonts, but how does it work? Is it possible for me to create a site like typekit myself? What technologies are involved in this process? A ...

phpcssrubyfonts

Enhance the slider's worth

Hey there, just wanted to mention that I didn't write this code myself. Another person did, and I'm a bit lost trying to figure out how to assign values to the three sliders. I don't want a default value; I want each slider to take its value ...

javascriptjqueryhtmlslider

Enable a single flex item to wrap across multiple lines

I have an HTML code snippet that needs to be styled using Flexbox. Specifically, I want to re-order the elements and create a 'line break' before the last item. How can I utilize Flexbox so that most flex items are treated as atomic units, but on ...

cssflexbox

Preventing Double Click Events on jQuery Spinner

I have been working on an option picker, but now there is a new requirement to make the options configurable. While this shouldn't be too difficult, I am facing some issues with the option picker: Currently, when an item is double-clicked, it will ge ...

javascriptjqueryhtml

Dealing with errors in AJAX divs

Utilizing an AJAX-based script known as AJAXTwits, I've been able to seamlessly load multiple Twitter timelines for a sports team into a designated div. The standout features of this script include its ability to combine various timelines into a singl ...

ajaxhtmlerror-handlingtimeout

Scaling CSS to fit both height and width (Stretch)

My content is contained within an 800x480 pixel box. When the window size changes, I want to achieve the following: Expand/Stretch the container to fill the entire screen Include all elements inside the container and maintain their relative positions I a ...

jqueryhtmlcss

Creating a ripple effect on a circle with CSS and HTML when it is clicked

Can anyone assist me in creating a wave effect around the circle when it is clicked? To better visualize what I am trying to achieve, you can view this GIF image. Appreciate your help in advance! ...

javascripthtmlcss

Is there a way to extract a variable value from an external webpage in order to manipulate

Although I am not well-versed in PHP, I believe it may be the most suitable solution for achieving my goal. I want to extract the value of a variable from an external page in order to process it for generating graphs and statistics on my own webpage. The s ...

phphtmlvariablespostget