调用隐藏在图形标题中的css

Question

我目前正在使用"hera“设计特色的这里，但是原始代码使用的大概是字体太棒了，我想用我自己的文本或可能的图像替换这些图标。我正在使用的代码如下：

​

<div class="grid">
  <figure class="effect-hera">
    <img src="img/17.jpg" alt="img17" />
    <figcaption>
      <h2>Tittle <span>Tittle two</span></h2>
      <p>
        <a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
        <a href="#"><i class="fa fa-fw fa-file-image-o"></i></a>
        <a href="#"><i class="fa fa-fw fa-file-archive-o"></i></a>
        <a href="#"><i class="fa fa-fw fa-file-code-o"></i></a>
      </p>
    </figcaption>
  </figure>
</div>

​

我添加了一个<p>标记来替换<i>标记，但是它并没有像在演示中那样隐藏span；我认为这是由于我对<figcaption>标记的误解，但是在研究之后，我不确定。即使在他的CSS文件中，我也找不到链接到中间<i>标记的类，所以我被卡住了。

Answer 1

<i>的opacity:0在<figure class="effect-hera">上盘旋，所以如果您想保持<i>的效果相同，请删除<i>中的所有CSS类，并为您自己的图像/字体使用不同的类。我为自己的工作代码创建了一个jsFiddle，如下所示：

<div class="grid">
  <figure class="effect-hera">
    <img src="img/17.jpg" alt="img17" />
    <figcaption>
      <h2>Tittle <span>Tittle two</span></h2>
      <p>
        <a href="#"><i class="fa-fw"></i></a>
        <a href="#"><i class="fa-fw"></i></a>
        <a href="#"><i class="fa-fw"></i></a>
        <a href="#"><i class="fa-fw"></i></a>
      </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;
}