选择菜单中的字体很棒
[英]Font awesome in select menu
问题描述
I want to add icons in my select menu. 
我想在我的选择菜单中添加图标。 In one of Stack Overflow pages I have found that I can use Font Awesome and insert icon as a text. 在Stack Overflow页面之一中，我发现我可以使用Font Awesome并将图标作为文本插入。 I included script in head part. 我在头部包含了脚本。 When I tried to use icon in a select menu, it was not working. 当我尝试在选择菜单中使用图标时，它无法正常工作。 But it works outside select menu perfectly. 但它完美地在选择菜单之外工作。 Is it possible to insert icon in a select menu option or it is simply impossible to do? 是否可以在选择菜单选项中插入图标，或者根本不可能这样做？ How can I do it? 我该怎么做？
There is a link to font awesome page: https://fontawesome.com/cheatsheet/free/solid 有一个链接到字体真棒页面： https ： //fontawesome.com/cheatsheet/free/solid
There is a snippet of what I tried 有一个我试过的片段
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://kit.fontawesome.com/9593bd7a92.js"></script> </head> <body> <i class="fas fa-truck">Truck</i> <br><br><br> <select> <option><i class="fas fa-truck">Truck</i></option> </select> </body> </html>
2 个解决方案
解决方案1
3 2019-08-30 17:03:40
This is a limitation of HTML. 这是HTML的限制。 select and option elements are native to HTML and do not have the ability to display HTML within them. select和option元素是HTML原生的，无法在其中显示HTML。
You'll need to mimic a select element with HTML, CSS + JavaScript and then map the value to a hidden input element (if you're using it as part of a form). 您需要使用HTML，CSS + JavaScript模拟选择元素，然后将值映射到隐藏的input元素（如果您将其用作表单的一部分）。
<ul class="select">
<li class="option"><i class="fas fa-truck">Truck</i></li>
<li class="option"><i class="fas fa-star">Star</i></li>
<li class="option"><i class="fas fa-user">User</i></li>
</ul>
This can help for providing insight on the interactive aspect of your dropdown (so it does more than just display as a list): https://www.w3schools.com/howto/howto_js_dropdown.asp 这有助于深入了解下拉列表的交互方面（因此它不仅仅显示为列表）： https ： //www.w3schools.com/howto/howto_js_dropdown.asp
解决方案2
3 已采纳 2019-08-30 17:06:03
Here is my solution 这是我的解决方案
By default i tags are stripped from options in HTML 默认情况下， i会从HTML中的选项中删除标签
Add icons in the following method 使用以下方法添加图标
<option> Truck</option>
Also add following CSS 另外添加以下CSS
select,option {
font-family: 'Arial', 'Font Awesome 5 Pro';
font-weight: 900;
}
Replace the "Arial" font with your website font name. 将“Arial”字体替换为您的网站字体名称。
Replace the middle code with the icon code of your choice 将中间代码替换为您选择的图标代码
'&#x' + 'f0d1' (fontawsome truck icon code) + ; '＆＃x'+ 'f0d1' （fontawsome卡车图标代码）+;
The icon code can be found by right clicking on icon and checking the before pseudo element of the i tag of an icon. 右键单击图标并检查图标的i标签的before伪元素，即可找到图标代码。
select,option { font-family: 'Arial', 'Font Awesome 5 Pro'; font-weight: 900; }
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https://kit.fontawesome.com/9593bd7a92.js"></script> </head> <body> <i class="fas fa-truck">Truck</i> <br><br><br> <select> <option> Truck</option> <option> Truck</option> <option> Truck</option> <option> Truck</option> </select> </body> </html>
Updated Answer 更新的答案
Since the above answer doesn't work on phones, you will have to implement custom select 由于上述答案不适用于手机，因此您必须实施自定义选择
Following is the code from w3schools how to create custom select 以下是来自w3schools的代码如何创建自定义选择
I modified the code to add support for icons. 我修改了代码以添加对图标的支持。
var x, i, j, selElmnt, a, b, c; function generateInnerDiv(index) { nametag = document.createElement("span"); nametag.textContent = selElmnt.options[index].textContent; icon = document.createElement("i"); icon.setAttribute("class", selElmnt.options[index].getAttribute('data-icon')); return [icon, nametag] } /*look for any elements with the class "custom-select":*/ x = document.getElementsByClassName("custom-select"); for (i = 0; i < x.length; i++) { selElmnt = x[i].getElementsByTagName("select")[0]; /*for each element, create a new DIV that will act as the selected item:*/ a = document.createElement("DIV"); a.setAttribute("class", "select-selected"); innerDiv = generateInnerDiv(selElmnt.selectedIndex) a.appendChild(innerDiv[0]); a.appendChild(innerDiv[1]); //a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML; x[i].appendChild(a); /*for each element, create a new DIV that will contain the option list:*/ b = document.createElement("DIV"); //items holder b.setAttribute("class", "select-items select-hide"); for (j = 1; j < selElmnt.length; j++) { /*for each option in the original select element, create a new DIV that will act as an option item:*/ c = document.createElement("DIV"); innerDiv = generateInnerDiv(j); c.appendChild(innerDiv[0]); c.appendChild(innerDiv[1]); //c.innerHTML = selElmnt.options[j].innerHTML; c.addEventListener("click", function(e) { /*when an item is clicked, update the original select box, and the selected item:*/ var y, i, k, s, h, l, m; s = this.parentNode.parentNode.getElementsByTagName("select")[0]; h = this.parentNode.previousSibling; l = this.getElementsByTagName("span")[0]; m = this.getElementsByTagName("i")[0]; for (i = 0; i < s.length; i++) { if (s.options[i].innerHTML == l.innerHTML) { s.selectedIndex = i; h.getElementsByTagName("span")[0].innerHTML = l.innerHTML; h.getElementsByTagName("i")[0].setAttribute("class", s.options[i].getAttribute('data-icon')); y = this.parentNode.getElementsByClassName("same-as-selected"); for (k = 0; k < y.length; k++) { y[k].removeAttribute("class"); } this.setAttribute("class", "same-as-selected"); break; } } h.click(); }); b.appendChild(c); } x[i].appendChild(b); a.addEventListener("click", function(e) { /*when the select box is clicked, close any other select boxes, and open/close the current select box:*/ e.stopPropagation(); closeAllSelect(this); this.nextSibling.classList.toggle("select-hide"); this.classList.toggle("select-arrow-active"); }); } function closeAllSelect(elmnt) { /*a function that will close all select boxes in the document, except the current select box:*/ var x, y, i, arrNo = []; x = document.getElementsByClassName("select-items"); y = document.getElementsByClassName("select-selected"); for (i = 0; i < y.length; i++) { if (elmnt == y[i]) { arrNo.push(i) } else { y[i].classList.remove("select-arrow-active"); } } for (i = 0; i < x.length; i++) { if (arrNo.indexOf(i)) { x[i].classList.add("select-hide"); } } } /*if the user clicks anywhere outside the select box, then close all select boxes:*/ document.addEventListener("click", closeAllSelect); ////////////////// //How to get values from custom select ////////////////// document.getElementById("btn1").addEventListener("click", () => { console.log(document.getElementById("myselect1").value) }); document.getElementById("btn2").addEventListener("click", () => { console.log(document.getElementById("myselect2").value) });
.custom-select { position: relative; font-family: Arial; } .custom-select select { display: none; /*hide original SELECT element:*/ } .custom-select i { margin-right: 10px; } .select-selected { background-color: DodgerBlue; } /*style the arrow inside the select element:*/ .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } /*point the arrow upwards when the select box is open (active):*/ .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } /*style the items (options), including the selected item:*/ .select-items div, .select-selected { color: #ffffff; padding: 8px 16px; border: 1px solid transparent; border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; cursor: pointer; user-select: none; } /*style items (options):*/ .select-items { position: absolute; background-color: DodgerBlue; top: 100%; left: 0; right: 0; z-index: 99; } /*hide the items when the select box is closed:*/ .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: rgba(0, 0, 0, 0.1); }
<script src="https://kit.fontawesome.com/9593bd7a92.js"></script> <h2>Custom Select</h2> <!--surround the select box with a "custom-select" DIV element. Remember to set the width:--> <div class="custom-select" style="width:200px;"> <select id="myselect1"> <option data-icon="fas fa-truck" value="0">Select car:</option> <option data-icon="fas fa-adjust" value="Audi">Audi</option> <option data-icon="fas fa-truck" value="BMW">BMW</option> <option data-icon="fas fa-arrow-up" value="Citroen">Citroen</option> <option data-icon="fas fa-asterisk" value="Ford">Ford</option> <option data-icon="fas fa-arrow-left" value="Honda">Honda</option> <option data-icon="fas fa-arrow-down" value="Jaguar">Jaguar</option> </select> </div> <br /> <div class="custom-select" style="width:200px;"> <select id="myselect2"> <option data-icon="fas fa-truck" value="0">Select car:</option> <option data-icon="fas fa-adjust" value="Audi">Audi</option> <option data-icon="fas fa-truck" value="BMW">BMW</option> <option data-icon="fas fa-arrow-up" value="Citroen">Citroen</option> <option data-icon="fas fa-asterisk" value="Ford">Ford</option> <option data-icon="fas fa-arrow-left" value="Honda">Honda</option> <option data-icon="fas fa-arrow-down" value="Jaguar">Jaguar</option> </select> </div> <br /> <h3>For testing Purpose<h3> <button id="btn1"> Console log Select 1 value </button> <button id="btn2"> Console log Select 2 value </button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.