问题描述
我已经阅读了几篇关于堆栈溢出的帖子，内容是关于如何通过 CSS 将 function laugh(counter){
if(counter <= 0){
return;
}
else{
console.log('laugh');
laugh(counter - 1) // subtract 1 from the counter and recur
}
}
laugh(10) 设置为 dropdown-toggle::after，然后在 HTML 中使用 display: none 标签来删除默认图标在导航栏中放置一个很棒的图标，就像这样 -
<i>我的问题是 - 是否可以使用标准 HTML 字符 - plus 符号 - 作为我的插入符号？我试图通过创建一个新类并像这样设置 CSS 内容来在 CSS 中实现这一点 -
.dropdown-toggle::after {
display: none;
}
不过，我似乎无法使其正常工作。字体真棒解决方案会很好，只有他们字体中的可用字体仅存在 900 的权重，这太重了。
我还尝试创建一个使用背景图像的 CSS 类，然后使用导航栏中的跨度或 HTML .navigation-caret-plus-symbol {
content:"\002B";
width: 10px;
height: 10px;
}
标记进行设置，但遗憾的是这没有显示任何内容。
解决方法
问题是：
[我]可以使用标准 HTML 字符 - 加号 - 作为我的插入符号吗？
是的。
这个新的 CSS 规则将用“+”字符替换默认的下拉列表“▾”。
.dropdown-toggle.dropdown-plus::after {
vertical-align: 0;
margin: 0;
content: "\002B";
border: none;
}<!-- Bootstrap 4.6.0 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<!-- add "dropdown-plus" to dropdown link to change "▾" to "+" -->
<a class="nav-link dropdown-toggle dropdown-plus" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<!-- -->
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>