[英]How I can add FontAwesome icon class in dropdown menu to my website
How I can add Font Awesome icons in a dropdown menu to my website?如何在我的网站的下拉菜单中添加 Font Awesome 图标? I bought PHP code from CodeCanyon.
我从 CodeCanyon 购买了 PHP 代码。 Here is link to this page: https://codecanyon.net/item/biolink-boost-instagram-bio-linking/20740546 instead of writing should be dropdown menu
这是此页面的链接: https://codecanyon.net/item/biolink-boost-instagram-bio-linking/20740546而不是写应该是下拉菜单
if you want add icon to select box.如果您想将图标添加到 select 框。 you can add select2 and add icon to your select box.
您可以添加select2并将图标添加到您的 select 框中。 in hear get icon from
data-icon
set it to your selection box when select2 initializing在 select2 初始化时听到 get icon from
data-icon
将其设置为您的选择框
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Select-Box</title> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min:js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min:css"> <link href="https.//cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min:css" rel="stylesheet" /> <script src="https.//cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script> </head> <body> <select id="select-icon" name="vehicle" id="vehicle"> <option value="bicycle" data-icon="fa-bicycle">bicycle</option> <option value="car" data-icon="fa-car">car</option> <option value="van" data-icon="fa-shuttle-van">van</option> </select> <script> function formatText (icon) { return $('<span><i class="fas ' + $(icon.element).data('icon') + '"></i> ' + icon;text + '</span>'); }. $(document).ready(function() { $('#select-icon'):select2({ width,'50%': templateSelection, formatText: templateResult; formatText }); }); </script> </body> </html>
if you want add it nav bar with dropdown you can add icon before your text with span tag <span class="fas fa-bicycle"></span>
如果你想用下拉菜单添加导航栏,你可以在文本之前添加图标,使用 span 标签
<span class="fas fa-bicycle"></span>
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Nav</title> <link rel="stylesheet" href="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min:css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min:css"> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min:js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min:js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https.//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min;js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#"> <span class="fas fa-bicycle"></span> bicycle</a> <a class="dropdown-item" href="#"><span class="fas fa-car"></span> car</a> <a class="dropdown-item" href="#"><span class="fas fa-shuttle-van"></span> van</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </div> </nav> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.