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


Tags: css,twitter-bootstrap-3,icons,html-entities

Problem :

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:

http://www.prepbootstrap.com/bootstrap-template/faq-example

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);
    }


Solution :

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';
}

    CSS Howto..

    responsive CSS - How to I make padding adjust automatically when visiting my site with an iPhone?

    How to access the physical Bundled and Minified js / css created by BundleConfig class

    How to define the color of characters in OL/LI lists via CSS, WITHOUT using any image bullets or any span tag?

    How to explain using browser.sleep in protractor

    How can I align unsorted list horizontly ?

    How to show list items in menu when hover on the parent's it via CSS? [closed]

    Show Limited Data Using jquery

    Showing Text When Hovering Over an Image Link

    How to change style of a table in a chrome extension?

    How to auto fit input field after dynamically added spans?

    Align lists on showing or hiding

    jQuery slideshow image delay

    W3.CSS how to make container centered inside another container

    How to take whole available width in bootstrap css?

    How to make background of table cell transparent

    Background hover showing in CSS

    CSS- How to create child menu towards leftern side

    how i can change the CSS class on click of an element [closed]

    how to trigger a css animation after certain pixels of scroll

    How can I make kinetic.js full screen background view

    How to persist checking the screen width in Javascript

    Angular.js: How to change div width based on user input

    How to set CSS3 ::selection using Javascript

    How to select li child of a ul without nth-child via css?

    How to expand a div to its content width WHEN it is larger than its parent?

    How to align the menu to center after certain width media query fires for RWD

    How to show just one line of text in paragraph with width 100% which is part of the table cell?

    How to modify twitter widget in css

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How to use CSS in Emails (specifically, to design hyperlink button)