- 5 years ago
- Yousaf
- 104729 Views
-
18
In HTML select tag you can not use images in case if you try like this.
<select>
<option value="phone" style="background image:url(images/mobile.png);">Mobile</option>
<option value="email"><i class="fa fa-email"></i> Email</option>
<option value="visit"><i class="fa fa-home"></i> Home</option>
</select>
To use icons in drop down options you can use Font Awesome Icons. In free font awesome version, you can find many useful icons.
FontAwesome icons here.
In a free version, you can only use icons available in this font. you can not add custom icons. So for adding custom icons, I have found a way to do so. There is a Website Icomoon.
You can create upload your icons in SVG format and the IcoMoon app will convert all those icons in Icomoon font just download the font and add it to your project. Then you can use Icons by their #UniCode or as a class. Every icon has a unique Unicode and class name.
By using Icomoon app you can create backup your project on IcoMoon App and can use anytime you want. you can use icons with Unicode like this
<select style="font-family: 'icomoon'">
<option [innerHTML]=" Mobile' ' + "\e900";"></option>
<option [innerHTML]="Email + ' ' + "\e900";"></option>
<option [innerHTML]="Postal + ' ' + "\e900";"></option>
<option [innerHTML]="visit + ' ' + "\e900";"></option>
</select>
The Icomon project that u will download will be like this here style.css is the file where Unicode and class names are defined and actually, the font is present in fonts folder in file names Icomoon
.eot
Don’t forget to use style=”font-family: ‘icomoon'” is select tag. Always use unicode as [innerHTML] attribute.
- 5 years ago
- Yousaf
- 104729 Views
-
18