Brian J Brian J - 1 year ago 55
CSS Question

How to insert HTML symbol after Bootstrap panel-heading in CSS?

I'm adding a

symbol to the end of a bootstrap panel so that it will expand out the panel when toggled.

But when I add the HTML character entity
for a greater than symbol, to the css style for this transformation. it renders the HTML code for the symbol rather than the symbol:

enter image description here

The complete example I'm taking this from is located here:

How can you render a HTML special character inside a panel using CSS?

This is my attempt at the styl which does rotate the characters as expected but the symbol isn't shown:

.panel-heading [data-toggle="collapse"]:after {
font-family: Verdana;
content: "&gt"; /* "play" icon */
float: right;
color: #F58723;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);

Answer Source

If I follow right the link you provide us, there's a code for CSS. Here you are working on CSS and not HTML. Shouldn't you use the CSS code instead of the html one content: '\003e';? Just a guess, I have never done this.

If it doesn't work, you may have to use :after so the code won't get overwrite.

I have test this this way and it worked. Hope it helps ;)

h1:after {
    content: '\003e';