Adding fontawsome icon to select

up vote
0
down vote

favorite

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"> 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"> 1</option>

        <option value="2"> 2</option>

        <option value="3"> 3</option>

        <option value="4"> 4</option>

        <option value="5"> 5</option>          

    </select>

</div>

html font-awesome

share|improve this question

edited yesterday

asked yesterday

Pontus

96

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Try this: jsfiddle.net/n31pbqog/554
  – Mohammad Zare Moghadam
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Did you the font awesome font-family for the options? And when using the free versionyou should add a font-weigth: 900; aswell
  – Thomas Scheffer
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Possible duplicate of font awesome icon in select option
  – Liam
  yesterday
  

  
  
  
  

add a comment | 

up vote
0
down vote

favorite

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"> 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"> 1</option>

        <option value="2"> 2</option>

        <option value="3"> 3</option>

        <option value="4"> 4</option>

        <option value="5"> 5</option>          

    </select>

</div>

html font-awesome

share|improve this question

edited yesterday

asked yesterday

Pontus

96

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Try this: jsfiddle.net/n31pbqog/554
  – Mohammad Zare Moghadam
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Did you the font awesome font-family for the options? And when using the free versionyou should add a font-weigth: 900; aswell
  – Thomas Scheffer
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Possible duplicate of font awesome icon in select option
  – Liam
  yesterday
  

  
  
  
  

add a comment | 

up vote
0
down vote

favorite

up vote
0
down vote

favorite

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"> 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"> 1</option>

        <option value="2"> 2</option>

        <option value="3"> 3</option>

        <option value="4"> 4</option>

        <option value="5"> 5</option>          

    </select>

</div>

html font-awesome

share|improve this question

edited yesterday

asked yesterday

Pontus

96

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"> 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"> 1</option>

        <option value="2"> 2</option>

        <option value="3"> 3</option>

        <option value="4"> 4</option>

        <option value="5"> 5</option>          

    </select>

</div>

<div class="form-group">    

    <label for="grade">Sätt betyg på ölen</label>

    <select class="form-control" name="grade">

        <option value="1"> 1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="5">5</option>          

    </select>

</div>

<div class="form-group">    

    <label for="grade">Sätt betyg på ölen</label>

    <select class="form-control" name="grade">

        <option value="1"> 1</option>

        <option value="2">2</option>

        <option value="3">3</option>

        <option value="4">4</option>

        <option value="5">5</option>          

    </select>

</div>

@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");

select { font-family: 'FontAwesome', Verdana }

@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"> 1</option>

        <option value="2"> 2</option>

        <option value="3"> 3</option>

        <option value="4"> 4</option>

        <option value="5"> 5</option>          

    </select>

</div>

<div class="form-group">    

    <label for="grade">Sätt betyg på ölen</label>

    <select class="form-control" name="rating">

        <option value="1"> 1</option>

        <option value="2"> 2</option>

        <option value="3"> 3</option>

        <option value="4"> 4</option>

        <option value="5"> 5</option>          

    </select>

</div>

html font-awesome

html font-awesome

share|improve this question

edited yesterday

asked yesterday

Pontus

96

share|improve this question

edited yesterday

asked yesterday

Pontus

96

share|improve this question

share|improve this question

edited yesterday

edited yesterday

edited yesterday

asked yesterday

Pontus

96

asked yesterday

Pontus

96

asked yesterday

Pontus

96

96

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Try this: jsfiddle.net/n31pbqog/554
  – Mohammad Zare Moghadam
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Did you the font awesome font-family for the options? And when using the free versionyou should add a font-weigth: 900; aswell
  – Thomas Scheffer
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Possible duplicate of font awesome icon in select option
  – Liam
  yesterday
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Try this: jsfiddle.net/n31pbqog/554
  – Mohammad Zare Moghadam
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Did you the font awesome font-family for the options? And when using the free versionyou should add a font-weigth: 900; aswell
  – Thomas Scheffer
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Possible duplicate of font awesome icon in select option
  – Liam
  yesterday
  

  
  
  
  

Try this: jsfiddle.net/n31pbqog/554
– Mohammad Zare Moghadam
yesterday

Try this: jsfiddle.net/n31pbqog/554
– Mohammad Zare Moghadam
yesterday

Did you the font awesome font-family for the options? And when using the free versionyou should add a font-weigth: 900; aswell
– Thomas Scheffer
yesterday

Did you the font awesome font-family for the options? And when using the free versionyou should add a font-weigth: 900; aswell
– Thomas Scheffer
yesterday

Possible duplicate of font awesome icon in select option
– Liam
yesterday

Possible duplicate of font awesome icon in select option
– Liam
yesterday

add a comment | 

1 Answer
1

active

oldest

votes

up vote
1
down vote

@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

share|improve this answer

answered yesterday

Asad

367

• 
  
  
  

  
  

  
  
  
  
  
  

  
  jsfiddle.net/8wpd6m0x here also you can see the code
  – Asad
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is it not possible to do it with the latest font awsome use.fontawesome.com/releases/v5.5.0/css/all.css?
  – Pontus
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  i'll check n let you know
  – Asad
  10 hours ago
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372194%2fadding-fontawsome-icon-to-select%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
1
down vote

@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

share|improve this answer

answered yesterday

Asad

367

• 
  
  
  

  
  

  
  
  
  
  
  

  
  jsfiddle.net/8wpd6m0x here also you can see the code
  – Asad
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is it not possible to do it with the latest font awsome use.fontawesome.com/releases/v5.5.0/css/all.css?
  – Pontus
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  i'll check n let you know
  – Asad
  10 hours ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

@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

share|improve this answer

answered yesterday

Asad

367

• 
  
  
  

  
  

  
  
  
  
  
  

  
  jsfiddle.net/8wpd6m0x here also you can see the code
  – Asad
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is it not possible to do it with the latest font awsome use.fontawesome.com/releases/v5.5.0/css/all.css?
  – Pontus
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  i'll check n let you know
  – Asad
  10 hours ago
  

  
  
  
  

add a comment | 

up vote
1
down vote

up vote
1
down vote

@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

share|improve this answer

answered yesterday

Asad

367

@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

@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>

@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>

share|improve this answer

answered yesterday

Asad

367

share|improve this answer

share|improve this answer

answered yesterday

Asad

367

answered yesterday

Asad

367

answered yesterday

Asad

367

367

• 
  
  
  

  
  

  
  
  
  
  
  

  
  jsfiddle.net/8wpd6m0x here also you can see the code
  – Asad
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is it not possible to do it with the latest font awsome use.fontawesome.com/releases/v5.5.0/css/all.css?
  – Pontus
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  i'll check n let you know
  – Asad
  10 hours ago
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  jsfiddle.net/8wpd6m0x here also you can see the code
  – Asad
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Is it not possible to do it with the latest font awsome use.fontawesome.com/releases/v5.5.0/css/all.css?
  – Pontus
  yesterday
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  i'll check n let you know
  – Asad
  10 hours ago
  

  
  
  
  

jsfiddle.net/8wpd6m0x here also you can see the code
– Asad
yesterday

jsfiddle.net/8wpd6m0x here also you can see the code
– Asad
yesterday

Is it not possible to do it with the latest font awsome use.fontawesome.com/releases/v5.5.0/css/all.css?
– Pontus
yesterday

Is it not possible to do it with the latest font awsome use.fontawesome.com/releases/v5.5.0/css/all.css?
– Pontus
yesterday

i'll check n let you know
– Asad
10 hours ago

i'll check n let you know
– Asad
10 hours ago

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53372194%2fadding-fontawsome-icon-to-select%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here