Is there a way to show Font Awesome icons in select options tag?
I have tried using it outside like this
<i class="fas fa-chart-pie"></i><select id="select_graphtype">
<option value="line_graph"> Line Graph</option>
<option value="pie_chart"> Pie Chart</option>
</select>
Any assistance on this would be greatly appreciated!
It's not recommended to use an icon tag inside of an option tag, but there is a different approach you can take by using the class 'fa' in the select element and applying icon classes to the values of the options. I have successfully implemented this method in my own project.
<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 solution doesn't work for you, make sure to add the following CSS:
.fa option {
font-weight: 900;
}
I hope this information proves helpful. Alternatively, you may want to consider using the Materialize CSS framework for a more visually appealing select component. You can find more information about it here.
Enhance your select dropdown by incorporating a FontAwesome icon as text. All you need is some CSS, the FontAwesome CSS, and the unicode codepoint. Here's an example using :
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>
This information may be helpful to you; however, please note that a similar question has been addressed here.
Give this a shot:
@font-face {
font-family: "AwesomeFont";
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: AwesomeFont;
}<select id="select_graphtype">
<option value="line_graph">  Line Graph</option>
<option value="pie_chart">  Pie Chart</option>
</select>I need help creating a function that will transfer items from the basket to the cart. The code I have written works well in Firefox and Chrome, however, it is not recognizing the products. var modals_pool = {}; $('.deal_order_btn').on('clic ...
I am new to using jquery and I have encountered a problem in my project. I am attempting to iterate through all the links within the #rate_box and attach a click event to them. This click event is supposed to send data to an external php script, then remov ...
I have implemented a CSS target to create some basic animation in my Backbone project. However, I am facing an issue where the method I am currently using adds a #banner to the URL, which Backbone tries to interpret as a route if users refresh the page aft ...
I need some help with a cloud page I am creating. I have implemented an alphabetic data validation in HTML to only allow users to input letters, which is working as expected. However, the issue I am currently facing is that the data validation error messa ...
Attempting to include row numbers in HTML/CSS. Below is the HTML code with React populating the rows: <table className="table table-striped"> <thead> <tr> {/*<th>ID</th>*/} ...
The responsive view in the browser appears to be working correctly. Everything is functioning fine. However, when I switch to my Android phone, the alignment is off. I've tested it on multiple devices and the results are consistent. What could be cau ...
I am facing an issue with passing the data of an Observable fetched via an API request to a component variable for display. I have been trying but unable to make it work successfully. Any assistance would be greatly appreciated. Here is my code. Thank you. ...
<div class="error"> <input type="text" name="email"> <div class="error-message">Please Enter Email</div> </div> <div class="i-icon-div">Lorem Ipsum</div> I am trying to identify the div with the class of i-icon-di ...
Is there a way to ensure that the browser caches invalid or broken images so that when they are re-fetched, the loading time is immediate? I am particularly interested in two scenarios: 1) The first scenario involves trying to load an image from a URL co ...
For instance: If id="select[1]" is set to value=1 id 2-5 cannot also be assigned to value=1 <?php for($i= 0;$i<5;$i++){ ?> <select id="select[]" name="select[]"> <option hidden selected>Please Select</option> ...
Currently, I am studying HTML, CSS, Bootstrap 4, jQuery3, and JavaScript (ES6+), and to enhance my skills, I have devised an exercise for practice and consolidation. I have created 4 HTML files, all featuring responsive design based on Bootstrap 4: inde ...
My friend and I are working on a school project that involves creating a small application. The main goal of this app is to find pharmacies in our area. I am looking to extract information from two specific websites. gun = day/date lc = id of town ...
Despite including dependencies for HTML loaders in my Angular 2 application, webpack is not bundling my HTML files along with the rest of the files it generates. I have tried using both "html-loader" and "html-webpack-plugin," but to no avail. My webpack ...
I've recently delved into the world of webGL and three.js and decided to try out an example from JSFiddle, http://jsfiddle.net/BlackSRC/XWCRM/1/ However, upon testing it, I'm facing an issue where nothing is showing up on the screen. Here is th ...
Creating a webpage with a full-page layout using a content session that spans the entire height of its container is my current project. To achieve this, I have implemented the following: The content's container (div.inner) is set to be absolute-posi ...
Currently, I'm in the process of constructing a website with Bootstrap 5 and have integrated a form that is intended to be completed and forwarded to my email address. I've chosen to utilize formsubmit.co for this purpose. However, when I attempt ...
Generate dynamic and user-defined positioning requires input parameters: offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth ...
My current objective is to detect when my video tag enters fullscreen mode so I can modify attributes of that specific video ID or reference. Despite trying various methods, I have managed to log the element using my current approach. Earlier attempts with ...
Which is more efficient: using only the ID as a selector or adding additional identifiers? For instance $('#element') vs $('#container #element') or getting even more detailed: $('body div#container div#element') ? ...
After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...