ng bootstrap Accordion 无法添加向下箭头图标
Posted
技术标签:
【中文标题】ng bootstrap Accordion 无法添加向下箭头图标【英文标题】：ng bootstrap Accordion to cant add arrow down icon 【发布时间】：2019-04-03 02:17:01 【问题描述】：任何人都知道如何为icon-arrow-down 添加ng bootstrap Accordion
我添加了这个<i class="icon-arrow-down"></i> 但不起作用
这是我的代码
<ngb-accordion #acc="ngbAccordion">
<ngb-panel title="Task Tyeps (5)"> <i class="icon-arrow-down"></i>
<ng-template ngbPanelContent>
text.....
</ng-template>
</ngb-panel>
</ngb-accordion>
我尝试像这样添加
谢谢
【问题讨论】：
【参考方案1】：终于解决了我的问题
<ngb-accordion class="range-accordion">
<ngb-panel>
<ng-template ngbPanelTitle>
<div class="d-flex justify-content-between">
<div class="d-flex" style="font-weight: bold; color: #1c2128;">Checklist items</div>
<div class="d-flex"><i class="icon-arrow-down"></i></div>
</div>
</ng-template>
<ng-template ngbPanelContent>
text
</ng-template>
</ngb-panel>
</ngb-accordion>
根据我们的要求添加一些自定义样式。
.range-accordion .btn-link
width: 100%;
text-decoration-line: none;
【讨论】：
：先生，您能告诉我如何在 accodian 中默认 + 图标吗？ @Kapilsoni m 您应该将图标更改为<i class="icon-arrow-down"></i>
：实际上先生，在我的情况下，我必须有条件地显示和隐藏默认 + 图标你能告诉我怎么做吗？
@Kapilsoni 你能用***.com/questions/ask为你提供冲突吗
:我已经问过了--***.com/questions/67085969/…【参考方案2】：
我不知道你的完整代码，但我猜你没有导入 Font Awesome。 "icon-arrow-down" 需要 Font Awesome 3.2.1 库，尝试在页面的<head> 部分添加以下内容
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
【讨论】：
您好，感谢您的回答，我已经为我的项目添加了font-awesome.css 以上是关于ng bootstrap Accordion 无法添加向下箭头图标的主要内容，如果未能解决你的问题，请参考以下文章
带有下拉图标-chevron 的 Bootstrap Accordion 导航
AngularJs的UI组件ui-Bootstrap分享——Accordion