如何在我的网站的下拉菜单中添加 FontAwesome 图标 class
[英]How I can add FontAwesome icon class in dropdown menu to my website
问题描述
如何在我的网站的下拉菜单中添加 Font Awesome 图标？ 我从 CodeCanyon 购买了 PHP 代码。 这是此页面的链接： https://codecanyon.net/item/biolink-boost-instagram-bio-linking/20740546而不是写应该是下拉菜单
1 个解决方案
解决方案1
0 2021-01-13 08:05:49
如果您想将图标添加到 select 框。 您可以添加select2并将图标添加到您的 select 框中。 在 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>
如果你想用下拉菜单添加导航栏，你可以在文本之前添加图标，使用 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>
如何向我的网站添加自定义菜单，我需要编辑什么文件？
[英]How can I add a custom menu to my website and what file would I need to edit?
KnpMenuBundle - 如何为菜单的每个元素设置一个图标类？
[英]KnpMenuBundle - how can i set an icon class to each elements of menu?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.