I’m embedding the following SVG icon as a path in my HTML page:
1 |
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg> |
How can I include the above SVG icon path
as a class
in CSS? So I can just use it as an attribute
in my HTML page like this:
1 |
<i class="chevron-right"></i> |
Solution
Use it as background:
1 2 3 4 5 6 7 8 9 10 |
.chevron-right { display: inline-block; width: 1rem; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain no-repeat; } .chevron-right::before { content: ""; display: block; padding-top: 100%; } |
1 2 3 |
<i class="chevron-right"></i> <i class="chevron-right" style="width:2rem"></i> <i class="chevron-right" style="width:4rem"></i> |
Alternative:
In case you want coloration consider mask:
1 2 3 4 5 6 7 8 9 10 11 |
.chevron-right { display: inline-block; width: 1rem; -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>') 0 0/contain; background: currentColor; } .chevron-right::before { content: ""; display: block; padding-top: 100%; } |
1 2 3 |
<i class="chevron-right"></i> <i class="chevron-right" style="width:2rem;color:red;"></i> <i class="chevron-right" style="width:4rem;color:blue;"></i> |
Alternative 2:
Using SVG as background image With my solution you’re able to get something similar: Here is bulletproff solution: Your html:
<input class='calendarIcon'/>
Your SVG: i used fa-calendar-alt (any IDE may open svg image as shown below)
1 2 3 4 |
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"> <path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/> </svg> |
1 2 3 4 5 6 |
.calendarIcon{ //your url will be something like this: background-image: url("data:image/svg+xml,***<here place encoded svg>***"); background-repeat: no-repeat; } |
1 2 3 4 5 |
.{ fill: #f00; //neither this background-color: #f00; //nor this } |
<svg xmlns="" path="" fill="#f00"/></svg>
To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:
1 2 3 4 5 6 7 |
.calendarIcon{ background-image: url("data:image/svg+xml,%3Csvg...svg%3E"); background-repeat: no-repeat; padding-right: calc(1.5em + 0.75rem); background-position: center right calc(0.375em + 0.1875rem); background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem); } |