Tosunkaya.com

Using SVG Icon Path in CSS Classes

I’m embedding the following SVG icon as a path in my HTML page:

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:

Solution

Use it as background:

Alternative:

In case you want coloration consider mask:

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)

To use it at css background-image you gotta encode the svg to address valid string. I used this tool (name: URL Decoder—Convert garbled address) As far as you got all stuff you need, you’re coming to css
Note: these styling wont have any effect on encoded svg image
because all changes over the image must be applied directly to its svg code <svg xmlns="" path="" fill="#f00"/></svg> To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:
5/53526 oy

Emre Tosunkaya

Kendini İnternete adamış bir tekno kişi. Teknoloji ve İnternet adına; WordPress, Webmaster, Android, Google, mobil, oyun, yazılım hakkında insanlara yararlı makaleler yazar.

  • Kuponla.com İndirim Kuponları
  • Uzman Diyetisyen Semiye Tosunkaya
  • Güzel Hosting, 2008'den beri kaliteli ve ekonomik paylaşımlı hosting, kiralık sunucu, sanal sunucu ve co-location hizmetleri sağlamaktadır.
  • Turhost: Türkiye'nin Lider Hosting ve Domain Servis Sağlayıcısı
  • n11.com - Alışverişin Uğurlu Adresi
  • En Trend Ürünler Türkiye'nin Online Alışveriş Sitesi Amazon'da
Kuponla.com İndirim Kuponları Binance %10 Komisyon İndirimi TRBinance %10 Komisyon İndirimi Amazon Amazon 50₺ indirim kodu Trendyol Güncel İndirim Kodları