如何从其他图标中定位单个图标？答案

【问题标题】：How to target an individual icon from rest of the other icons?如何从其他图标中定位单个图标？
【发布时间】：2019-08-22 13:55:26
【问题描述】：

我有一个手风琴列表，当您单击每个手风琴时，它会展开 (+) 并折叠 (-)。问题是，当我尝试展开其中一个手风琴选项卡时，它会很好地展开和折叠，但图标“-”/“+”符号也会为所有其他手风琴切换，即使它们没有被点击。我希望'-'/'+' 图标只为我点击的手风琴切换，而不是为其他手风琴切换。

cshtml:
<h2 class="accordion-toggle collapsed" data-toggle="collapse" href="#anyId" name=""><button>@l.GetElementValue("Title")</button></h2>

 <div id="anyId" class="collapse">
    @foreach ())
   {
     // looping through accordion list. 
   }
  </div>



CSS:
.accordion-toggle:after {
    font-family: 'FontAwesome'; /* essential to enable caret symbol*/
    content: "\f068"; /* adjust as needed, taken from font-awesome.css */
    color: #0046ad;
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -12px;
    font-size: 25px;

}

.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    /*font-family: 'FontAwesome';*/
    content: "\f067"; /* adjust as needed, taken from font-awesome.css */
    /*color: #0046ad;
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -12px;
    font-size: 25px;*/
}

【问题讨论】：

能否请您添加生成的HTML和任何相关的JS？
请编辑您的问题，而不是粘贴到 cmets 中
欢迎来到 StackOverflow。请编辑您的问题并在您的问题中添加minimal reproducible example 以获得更快、更好的答案
嗨，我想我的一般问题是，如何为手风琴设置单独的图标，而不是让所有手风琴共享图标？
@Cliff 您可能需要通过 js fiddle 或 stackblitz 提供工作的 sn-p。乍一看，您似乎正在使用插件。我原以为您的问题是由于每个项目之间的共享选择器造成的，但是如果没有工作示例，就很难说。

标签： jquery css font-awesome accordion

【解决方案1】：

只需删除默认折叠的类并在 css 下面使用。

.accordion-toggle:after {
    font-family: 'FontAwesome'; /* essential to enable caret symbol*/
    content: "\f067";
    position: absolute;
    left: .5em;
    top: 50%;
    margin-top: -12px;
    font-size: 25px;*/
}

.collapsed:after {
    content: "\f068";
}

请参考下面的链接，我在这里使用了你的结构。忽略js就试试css，

https://jsfiddle.net/jignashagpatel/rmpnaq59/7/

【讨论】：

感谢@jignasha 对此的帮助。这正在工作。
嗨@jignasha，我有一个后续问题。除了使用 f067、f068 等 Font Awesome unicode，我想知道有没有办法在 CSS 或JS？