How do you change a unicode content icons color?-CodePudding

I'm using the content attribute to append a plus icon in unicode form. How do you set the color for this icon? I have tried using the color attribute and this didn't work.

    .accordion:after {
      content: '\02795'; /* Unicode character for "plus" sign ( ) */
      font-size: 15px;
      color:#FFBC00;
      float: right;
      margin-left: 5px;
    }

    <button >Section 2</button>
    <div >
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>

CodePudding user response：

\002795 ➕^✻ is a bitmap I think and it can't be altered AFAIK. In the example below I used \00ff0b ＋^✻ which can be assigned a color.

^{✻ Searchbar has a bug, just backspace once and it'll search. That's just for when coming from a link, but other than that it's an excellent resource.}

:root {
  font: 2ch/1.25 'Segoe UI'
}

.accordion {
  display: inline-block;
  width: max-content;
  max-height: 40px;
  padding 0;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 900;
  vertical-align: sub;
  color: goldenrod;
  background: lightblue;
  cursor: pointer;
}

.accordion:hover,
.accordion:active {
  outline: 2px inset blue;
  color: navy;
  background: lightyellow;
}

.accordion::after {
  content: '\00ff0b';
  display: inline-block;
  margin: -8px -8px 0 5px;
  font-size: 2rem;
  font-weight: 900;
  vertical-align: sub;
  color: goldenrod;
}

.accordion:hover::after,
.accordion:active::after {
  color: navy;
}

<button >Section 2</button>
<div >
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

CodePudding user response：

The solution is to use a non heavy plus sign that has different color variants. Here is an example: https://unicode-table.com/en/002B/.