如何解决如何在不使用“字体真棒”的情况下更改 Bootstrap 导航栏的下拉插入符号图标?
我已经阅读了几篇关于堆栈溢出的帖子,内容是关于如何通过 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。