How to display Icon in select options tag
Need to display Font Awesome in select options tag?
If i use outside Its working <i class="fas fa-chart-pie"></i>
But how can i display it in tag instead if text
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
Can you please help me out ?
jquery html css bootstrap-4 options
add a comment |
Need to display Font Awesome in select options tag?
If i use outside Its working <i class="fas fa-chart-pie"></i>
But how can i display it in tag instead if text
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
Can you please help me out ?
jquery html css bootstrap-4 options
Tried anything yet? Your best option is to wrap theselect
tag in a div, make the appearance ofselect
tag indulge in with the wrapperdiv
, put an icon in it and position it.
– Deepak Kamat
Jan 2 at 7:18
1
Duplicate of stackoverflow.com/questions/19259518/…
– Anji
Jan 2 at 7:19
Possible duplicate of How to use a Bootstrap 3 glyphicon in an html select
– ElusiveCoder
Jan 2 at 7:20
1
Possible duplicate of font awesome icon in select option
– zubair khanzada
Jan 2 at 7:29
add a comment |
Need to display Font Awesome in select options tag?
If i use outside Its working <i class="fas fa-chart-pie"></i>
But how can i display it in tag instead if text
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
Can you please help me out ?
jquery html css bootstrap-4 options
Need to display Font Awesome in select options tag?
If i use outside Its working <i class="fas fa-chart-pie"></i>
But how can i display it in tag instead if text
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
Can you please help me out ?
jquery html css bootstrap-4 options
jquery html css bootstrap-4 options
asked Jan 2 at 7:15
Jhansi PasupuletiJhansi Pasupuleti
145
145
Tried anything yet? Your best option is to wrap theselect
tag in a div, make the appearance ofselect
tag indulge in with the wrapperdiv
, put an icon in it and position it.
– Deepak Kamat
Jan 2 at 7:18
1
Duplicate of stackoverflow.com/questions/19259518/…
– Anji
Jan 2 at 7:19
Possible duplicate of How to use a Bootstrap 3 glyphicon in an html select
– ElusiveCoder
Jan 2 at 7:20
1
Possible duplicate of font awesome icon in select option
– zubair khanzada
Jan 2 at 7:29
add a comment |
Tried anything yet? Your best option is to wrap theselect
tag in a div, make the appearance ofselect
tag indulge in with the wrapperdiv
, put an icon in it and position it.
– Deepak Kamat
Jan 2 at 7:18
1
Duplicate of stackoverflow.com/questions/19259518/…
– Anji
Jan 2 at 7:19
Possible duplicate of How to use a Bootstrap 3 glyphicon in an html select
– ElusiveCoder
Jan 2 at 7:20
1
Possible duplicate of font awesome icon in select option
– zubair khanzada
Jan 2 at 7:29
Tried anything yet? Your best option is to wrap the
select
tag in a div, make the appearance of select
tag indulge in with the wrapper div
, put an icon in it and position it.– Deepak Kamat
Jan 2 at 7:18
Tried anything yet? Your best option is to wrap the
select
tag in a div, make the appearance of select
tag indulge in with the wrapper div
, put an icon in it and position it.– Deepak Kamat
Jan 2 at 7:18
1
1
Duplicate of stackoverflow.com/questions/19259518/…
– Anji
Jan 2 at 7:19
Duplicate of stackoverflow.com/questions/19259518/…
– Anji
Jan 2 at 7:19
Possible duplicate of How to use a Bootstrap 3 glyphicon in an html select
– ElusiveCoder
Jan 2 at 7:20
Possible duplicate of How to use a Bootstrap 3 glyphicon in an html select
– ElusiveCoder
Jan 2 at 7:20
1
1
Possible duplicate of font awesome icon in select option
– zubair khanzada
Jan 2 at 7:29
Possible duplicate of font awesome icon in select option
– zubair khanzada
Jan 2 at 7:29
add a comment |
3 Answers
3
active
oldest
votes
You can't use (icon tag) inside (option tag), but you can do it differently like use class='fa' in select and icon classes in option's value. It's fully working in my case.
<select id="select_graphtype" class="fa">
<option value="fa fa-address-card"> line chart</option>
<option value="fa fa-address-card"> Pie Chart</option>
</select>
If this is not working please ensure this
.fa option {
font-weight: 900;
}
Hope this helps you. Better I would suggest you dashing frontend framework Materialize CSS select in this link.. I have been using it for my frontend works.
Thank you So much It worked
– Jhansi Pasupuleti
Jan 2 at 8:45
@JhansiPasupuleti mostly welcome. If this helped you then please make it accepted. Regards Mobasshir.
– Mobasshir Bhuiyan
Jan 2 at 11:05
add a comment |
You can simply add a FontAwesome icon to your select dropdown as text. You only need a few things in CSS only, the FontAwesome CSS and the unicode. For example :
select {
font-family: 'FontAwesome', 'Second Font name'
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
</select>
you'r ask is duplicat with this.
add a comment |
Try This:
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
font-family: FontAwesome;
}
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
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',
autoActivateHeartbeat: false,
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002590%2fhow-to-display-icon-in-select-options-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can't use (icon tag) inside (option tag), but you can do it differently like use class='fa' in select and icon classes in option's value. It's fully working in my case.
<select id="select_graphtype" class="fa">
<option value="fa fa-address-card"> line chart</option>
<option value="fa fa-address-card"> Pie Chart</option>
</select>
If this is not working please ensure this
.fa option {
font-weight: 900;
}
Hope this helps you. Better I would suggest you dashing frontend framework Materialize CSS select in this link.. I have been using it for my frontend works.
Thank you So much It worked
– Jhansi Pasupuleti
Jan 2 at 8:45
@JhansiPasupuleti mostly welcome. If this helped you then please make it accepted. Regards Mobasshir.
– Mobasshir Bhuiyan
Jan 2 at 11:05
add a comment |
You can't use (icon tag) inside (option tag), but you can do it differently like use class='fa' in select and icon classes in option's value. It's fully working in my case.
<select id="select_graphtype" class="fa">
<option value="fa fa-address-card"> line chart</option>
<option value="fa fa-address-card"> Pie Chart</option>
</select>
If this is not working please ensure this
.fa option {
font-weight: 900;
}
Hope this helps you. Better I would suggest you dashing frontend framework Materialize CSS select in this link.. I have been using it for my frontend works.
Thank you So much It worked
– Jhansi Pasupuleti
Jan 2 at 8:45
@JhansiPasupuleti mostly welcome. If this helped you then please make it accepted. Regards Mobasshir.
– Mobasshir Bhuiyan
Jan 2 at 11:05
add a comment |
You can't use (icon tag) inside (option tag), but you can do it differently like use class='fa' in select and icon classes in option's value. It's fully working in my case.
<select id="select_graphtype" class="fa">
<option value="fa fa-address-card"> line chart</option>
<option value="fa fa-address-card"> Pie Chart</option>
</select>
If this is not working please ensure this
.fa option {
font-weight: 900;
}
Hope this helps you. Better I would suggest you dashing frontend framework Materialize CSS select in this link.. I have been using it for my frontend works.
You can't use (icon tag) inside (option tag), but you can do it differently like use class='fa' in select and icon classes in option's value. It's fully working in my case.
<select id="select_graphtype" class="fa">
<option value="fa fa-address-card"> line chart</option>
<option value="fa fa-address-card"> Pie Chart</option>
</select>
If this is not working please ensure this
.fa option {
font-weight: 900;
}
Hope this helps you. Better I would suggest you dashing frontend framework Materialize CSS select in this link.. I have been using it for my frontend works.
edited Jan 2 at 7:50
answered Jan 2 at 7:45


Mobasshir BhuiyanMobasshir Bhuiyan
438
438
Thank you So much It worked
– Jhansi Pasupuleti
Jan 2 at 8:45
@JhansiPasupuleti mostly welcome. If this helped you then please make it accepted. Regards Mobasshir.
– Mobasshir Bhuiyan
Jan 2 at 11:05
add a comment |
Thank you So much It worked
– Jhansi Pasupuleti
Jan 2 at 8:45
@JhansiPasupuleti mostly welcome. If this helped you then please make it accepted. Regards Mobasshir.
– Mobasshir Bhuiyan
Jan 2 at 11:05
Thank you So much It worked
– Jhansi Pasupuleti
Jan 2 at 8:45
Thank you So much It worked
– Jhansi Pasupuleti
Jan 2 at 8:45
@JhansiPasupuleti mostly welcome. If this helped you then please make it accepted. Regards Mobasshir.
– Mobasshir Bhuiyan
Jan 2 at 11:05
@JhansiPasupuleti mostly welcome. If this helped you then please make it accepted. Regards Mobasshir.
– Mobasshir Bhuiyan
Jan 2 at 11:05
add a comment |
You can simply add a FontAwesome icon to your select dropdown as text. You only need a few things in CSS only, the FontAwesome CSS and the unicode. For example :
select {
font-family: 'FontAwesome', 'Second Font name'
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
</select>
you'r ask is duplicat with this.
add a comment |
You can simply add a FontAwesome icon to your select dropdown as text. You only need a few things in CSS only, the FontAwesome CSS and the unicode. For example :
select {
font-family: 'FontAwesome', 'Second Font name'
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
</select>
you'r ask is duplicat with this.
add a comment |
You can simply add a FontAwesome icon to your select dropdown as text. You only need a few things in CSS only, the FontAwesome CSS and the unicode. For example :
select {
font-family: 'FontAwesome', 'Second Font name'
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
</select>
you'r ask is duplicat with this.
You can simply add a FontAwesome icon to your select dropdown as text. You only need a few things in CSS only, the FontAwesome CSS and the unicode. For example :
select {
font-family: 'FontAwesome', 'Second Font name'
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
<option>Hi, </option>
</select>
you'r ask is duplicat with this.
answered Jan 2 at 7:24
ehsan_rakhshaniehsan_rakhshani
111
111
add a comment |
add a comment |
Try This:
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
font-family: FontAwesome;
}
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
add a comment |
Try This:
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
font-family: FontAwesome;
}
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
add a comment |
Try This:
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
font-family: FontAwesome;
}
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
Try This:
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
font-family: FontAwesome;
}
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
font-family: FontAwesome;
}
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
@font-face {
font-family: "FontAwesome";
font-weight: normal;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
select {
font-family: FontAwesome;
}
<select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
answered Jan 2 at 8:20


Partho63Partho63
1,97511123
1,97511123
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54002590%2fhow-to-display-icon-in-select-options-tag%23new-answer', 'question_page');
}
);
Post as a guest
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
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
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
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Tried anything yet? Your best option is to wrap the
select
tag in a div, make the appearance ofselect
tag indulge in with the wrapperdiv
, put an icon in it and position it.– Deepak Kamat
Jan 2 at 7:18
1
Duplicate of stackoverflow.com/questions/19259518/…
– Anji
Jan 2 at 7:19
Possible duplicate of How to use a Bootstrap 3 glyphicon in an html select
– ElusiveCoder
Jan 2 at 7:20
1
Possible duplicate of font awesome icon in select option
– zubair khanzada
Jan 2 at 7:29