CSS || How To Use Inline SVG Image As Background Image Icon Using CSS

December 23, 2020 admin No comments

The following is a module which demonstrates how to use Inline SVG image as Data URL background image icon using CSS.

1. Usage

The example below demonstrates the use of the icon CSS class to display an SVG image as an image icon.





		
		
			1. Usage
			
XHTML
			
			<!-- // Usage -->

<div class="icon home">Home</div> 
			
				
					
				
					1
2
3
				
						<!-- // Usage -->
 
<div class="icon home">Home</div>

Sample:

2. Icon CSS

The SVG image used in this example is the following:





		
		
			
			
XHTML
			
			<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9'/><path d='M9 22V12h6v10M2 10.6L12 2l10 8.6'/></svg>
			
				
					
				
					1
				
						<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9'/><path d='M9 22V12h6v10M2 10.6L12 2l10 8.6'/></svg>

Make sure to URL encode your entire SVG, and then simply insert the encoded string as the css background-image.

You can use any online converter to URL encode the SVG string.

The following is the Icon css file.





		
		
			Utils.css
			
CSS
			
			/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.css
//    Description: General utility Css
// ============================================================================ 
*/

.icon {
    display: inline-block;
}

.icon:before {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-size: 100%;
    transform: translateY(-10%);  
    background-repeat: no-repeat; 
}

.icon.home:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9'/%3E%3Cpath d='M9 22V12h6v10M2 10.6L12 2l10 8.6'/%3E%3C/svg%3E");    
} /* http://programmingnotes.org/ */
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
				
						/*
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  Utils.css
//    Description: General utility Css
// ============================================================================ 
*/
 
.icon {
    display: inline-block;
}
 
.icon:before {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    content: "";
    display: inline-block;
    vertical-align: middle;
    background-size: 100%;
    transform: translateY(-10%);  
    background-repeat: no-repeat; 
}
 
.icon.home:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 9v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9'/%3E%3Cpath d='M9 22V12h6v10M2 10.6L12 2l10 8.6'/%3E%3C/svg%3E");    
} /* http://programmingnotes.org/ */

3. More Examples

Below are more examples demonstrating the use of the ‘Icon‘ css. Don’t forget to include the module when running the examples!





		
		
			More Examples
			
XHTML
			
			<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  demo.html
//    Description: Demonstrates the use of css styles
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes HTML Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>

<!-- // Include module -->
<link rel="stylesheet" type="text/css" href="./Utils.css">

</head>
<body>
<div class="main">
    <div>My Programming Notes HTML Demo</div>

    <div class="icon home">Home</div>  
</div>
</body>
</html> <!-- http://programmingnotes.org/ -->
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
				
						<!--
// ============================================================================
//    Author: Kenneth Perkins
//    Date:   Dec 23, 2020
//    Taken From: http://programmingnotes.org/
//    File:  demo.html
//    Description: Demonstrates the use of css styles
// ============================================================================
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Programming Notes HTML Demo</title>
<style>
.main {
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
 
<!-- // Include module -->
<link rel="stylesheet" type="text/css" href="./Utils.css">
 
</head>
<body>
<div class="main">
    <div>My Programming Notes HTML Demo</div>
 
    <div class="icon home">Home</div>  
</div>
</body>
</html> <!-- http://programmingnotes.org/ -->

QUICK NOTES:
The highlighted lines are sections of interest to look out for.

The code is heavily commented, so no further insight is necessary. If you have any questions, feel free to leave a comment below.

Was this article helpful?

👍 YesNo

Posted in: CSS, Snippets Tags: css, icon

CSS || How To Use Inline SVG Image As Background Image Icon Using CSS

Related

Leave a ReplyCancel reply

Search

Compile Your Code Now

Translate Page

Popular Pages

Recent

Archives

Categories