Calling on css that hides within a figcaption - css

Question

I am currently using the "hera" design featured here however the original code uses presumably Font Awesome, I'd like to replace these icons with my own text or possibly images. The code I'm working with is as follows:
<div class="grid">
<figure class="effect-hera">
<img src="img/17.jpg" alt="img17" />
<figcaption>
<h2>Tittle <span>Tittle two</span></h2>
<p>
<i class="fa fa-fw fa-file-image-o"></i>
<i class="fa fa-fw fa-file-image-o"></i>
<i class="fa fa-fw fa-file-archive-o"></i>
<i class="fa fa-fw fa-file-code-o"></i>
</p>
</figcaption>
</figure>
</div>
I added a <p> tag to replace the <i> tag however it didn't hide the span like in the demo; I presumed its due to my misunderstanding of the <figcaption> tag however after research I'm not sure. In even his CSS files I couldnt find the class linked to the middle <i> tags so Im stuck.

Answer 1

The <i>'s have opacity:0 until <figure class="effect-hera"> is hovered over, so if you want the same effect keep the <i>'s. If you want to stop Font Awesome, remove all the CSS classes in the <i>'s and use a different class for your own images/fonts. I made a jsFiddle of my working code, it is also below:
<div class="grid">
<figure class="effect-hera">
<img src="img/17.jpg" alt="img17" />
<figcaption>
<h2>Tittle <span>Tittle two</span></h2>
<p>
<i class="fa-fw"></i>
<i class="fa-fw"></i>
<i class="fa-fw"></i>
<i class="fa-fw"></i>
</p>
</figcaption>
</figure>
</div>
CSS:
.fa-fw {
background:url(http://maps.google.com/mapfiles/kml/pal3/icon55.png) no-repeat left top;
width:32px;
height:32px;
display:inline-block;
background-size:100%;
float:left;
}
.grid {
width:64px;
display:block;
}