CODEWITHSUNDEEP
htmlfont-awesome
Pontus
Pontus

Reputation: 61

Adding fontawsome icon to select

I want to add fontawsome icons inside my select field, as i understand it is not possible to do so in a normal fashion, but you need to add the icons unicode. Witch i have tried. Looking for tips or pointers.

<div class="form-group">    
    <label for="grade">Sätt betyg på ölen</label>
    <select class="form-control" name="grade">
        <option value="1">&#xf005; 1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>          
    </select>
</div>

I have tried your solutions and nothing works, i also tried to change the url to the lastest version of fontawsome like so 

@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");
select { font-family: 'FontAwesome', Verdana }

<div class="form-group">    
    <label for="grade">Sätt betyg på ölen</label>
    <select class="form-control" name="rating">
        <option value="1">&#xf005; 1</option>
        <option value="2">&#xf005; 2</option>
        <option value="3">&#xf005; 3</option>
        <option value="4">&#xf005; 4</option>
        <option value="5">&#xf005; 5</option>          
    </select>
</div>

Upvotes: 0

Views: 125

Answers (1)

Asad
Asad

Reputation: 124

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css");
select { font-family: 'FontAwesome', Verdana }
<div class="form-group">    
    <label for="grade">Sätt betyg på ölen</label>
    <select class="form-control" name="grade">
        <option value="1" >1 &#xf042</option>
        <option value="2">2 &#xf043</option>

    </select>
</div>

The unicodes can be found when you click on an icon: http://fontawesome.io/icons

Upvotes: 1

Related Questions