one :before psuedo element before four h1..?

Question

For the life of me cannot get his to work - I'm try to insert one icon font before a group of h1 tags within a div. I can get one icon font before each H1 tag, but this is not what I want. To re-iterate, one icon font before the div, not each h1. Any help would be massively appreciated. FYI - the text within the H1 consists animate.css fade in and delay, hence the seperate IDs and tags.

.container{
  position:;
  margin:0px auto;
  background-color:pink;
  width:100%;
  height:100%;
  overflow: hidden;
}

.motto-text {
  position:absolute;
  display: ;
  bottom:;
  left:;
}

#hero-text .motto-text:before {
  font-family: icomoon;
  content: "\e600"; 
  display:block;
  height:25px;
  width:25px;
  padding-right:3px;
  text-align: center;
  font-size: 3em;
  float: left;
  position: relative;
  color: white;
}​

<div class="container">
  <div id="hero-text" class="motto-text"><!-- Hero text to start-->
    <h1 id="delayedText1" class="animated fadeIn delay-1">Line 1</h1>
    <h1 id="delayedText2" class="animated fadeIn delay-2">Line 2</h1>
    <h1 id="delayedText3" class="animated fadeIn delay-3">Line 3</h1>
    <h1 id="delayedText4" class="animated fadeIn delay-4">Line</h1>
  </div>
</div>

Answer 1

You have a wrong selector: #hero-text .motto-text:before does not match any element in your markup, since it is a child selector. Use #hero-text.motto-text:before or just #hero-text:before instead.