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>

edited yesterday

asked yesterday

Pontus

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

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

edited yesterday

asked yesterday

Pontus

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

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

edited yesterday

asked yesterday

Pontus

<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

edited yesterday

asked yesterday

Pontus

edited yesterday

asked yesterday

Pontus

edited yesterday

asked yesterday

Pontus

asked yesterday

Pontus

asked yesterday

Pontus

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

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 |

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

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');
});

Post as a guest

Name

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

Required, but never shown

1 Answer
1

active

oldest

votes

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

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

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

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>

answered yesterday

Asad

367

answered yesterday

Asad

367

answered yesterday

Asad

367

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 |

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

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 |

draft saved

draft discarded

draft saved

draft discarded

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

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

Search This Blog

Ufyukyu