0

I would like to know how to put a svg created by me inside a css or scss class to assign only the class in the icon as in this w3 example:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-home"></i>
William
  • 1
  • Possible duplicate of [Do I use , , or for SVG files?](https://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files) – Jay May 30 '19 at 21:47
  • 1
    Hi, welcome to SO! As it sits your question is pretty broad and unclear on what exactly you're hoping to accomplish. Might take a sec to check the [FAQ](https://stackoverflow.com/help/dont-ask) on forming a good question for the format of a Q&A site to help others help you better. – Chris W. May 30 '19 at 21:50

1 Answers1

0

If you want to display a custom SVG via CSS you can do it in two steps:

  1. Turn the SVG into a Data Image
  2. Use the Data Image SVG as a CSS Background

Working Example:

div {
display: inline-block;
width: 40px;
height: 40px;
margin-right: 1px;
background-color: rgb(255, 0, 0);
}

.svg-background {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="2" y="3" width="36" height="5" fill="rgb(255, 255, 255)" /><rect x="2" y="11" width="36" height="5" fill="rgb(255, 255, 255)" /><rect x="2" y="19" width="36" height="5" fill="rgb(255, 255, 255)" /></svg>');
}
<div></div>
<div class="svg-background"></div>
Rounin
  • 27,134
  • 9
  • 83
  • 108