htmlcssorchardcms

adding bullets to header tag in orchard


I created list in orchard and the h1 tag takes the title of the list. I need to add a bullet for the header.

I need bullet before the h1 tag like the below image

enter image description here

http://jsfiddle.net/nRq27/1/

 <header>
    <h1>School info</h1>
  </header>

I used the background:image property, but its not displaying the bullet. how can I get the bullets?


Solution

  • Try:

    h1:before {
        background-image: url(http://www.alexander-bown.com/wp-content/uploads/2011/05/big-black-dot.jpg);
        background-repeat: no-repeat;
        background-size: 20px;
        width: 20px;
        height: 20px;
        display: inline-block;
        content:"";
        vertical-align: middle;
    }
    

    Updated fiddle here.