html - Font Awesome 图标作为背景

Question

我正在尝试创建像这个链接这样的图片库:

https://codepen.io/robgolbeck/pen/MagWRw

那个html代码是:

<section class="portfolio-container group">
    <ul class="portfolio-list group">
            <li>
                    <a href="#">
                            <img src="http://robgolbeck.com/demos/hover-overlay/images/thumb1.jpg">
                    </a>
            </li>

</ul>

CSS代码是:

   .portfolio-container,
   .portfolio-list {
      width: 100%;
    }

  .portfolio-list {
       margin: 0;
       padding: 0;
        list-style: none;
  }

    .portfolio-list li {
        position: relative;
       display: block;
       float: left;
       width: 20%;
  }

.portfolio-list li img {
       display: block;
       width: 100%;
      margin: 0;
      vertical-align: top;
  }

 .portfolio-list a:after {
       content: '\A';
       position: absolute;
       width: 100%;
      height: 100%;
      top: 0;
      left: 0;
       background: rgba(0, 0, 0, 0.6) url(http://robgolbeck.com/demos/hover-
     overlay/images/happy.png) center center no-repeat;
      opacity: 0;
      transition: all 0.5s;
      -webkit-transition: all 0.5s;
   }

  .portfolio-list a:hover:after {
       opacity: 1;
    }

   @media all and (max-width: 1080px) {
       .portfolio-list li {
              width: 25%;
      }
    }

   @media all and (max-width: 879px) {
        .portfolio-list li {
            width: 33.3333333%;
     }
   }

   @media all and (max-width: 560px) {
          .portfolio-list li {
            width: 50%;
        }
    }

 @media all and (max-width: 480px) {
      .portfolio-list li {
            width: 70%;
             float: none;
            clear: both;
            margin: 0 auto;
    }
   .portfolio-list a:after {
         width: 100%;
       }
.portfolio-list li img {
            width: 100%;
            margin: 0 auto;
    }
  }

  .group:before,
   .group:after {
       content: "";
        display: table
   }

   .group:after {
       clear: both
  }

   .group {
       zoom: 1
    }

但是我想添加 fontawsome 图标或图像而不是 happy.png 照片 我该怎么做？

Answer 1

就用这个site :) 简单快捷的方法。使字体成为图像。

示例 - 足总杯

加

您可以制作自己的尺寸。然后你可以使用那个图像。

例如:(我上传的图片)

.portfolio-container,
.portfolio-list {
  width: 100%;
}

.portfolio-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.portfolio-list li {
  position: relative;
  display: block;
  float: left;
  width: 20%;
}

.portfolio-list li img {
  display: block;
  width: 100%;
  margin: 0;
  vertical-align: top;
}

.portfolio-list a:after {
  content: url(http://sk.uploads.im/t/IcAC1.png);
  color: #fff;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6) center center no-repeat;
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-list a:hover:after {
  opacity: 1;
}

@media all and (max-width: 1080px) {
  .portfolio-list li {
    width: 25%;
  }
}

@media all and (max-width: 879px) {
  .portfolio-list li {
    width: 33.3333333%;
  }
}

@media all and (max-width: 560px) {
  .portfolio-list li {
    width: 50%;
  }
}

@media all and (max-width: 480px) {
  .portfolio-list li {
    width: 70%;
    float: none;
    clear: both;
    margin: 0 auto;
  }
  .portfolio-list a:after {
    width: 100%;
  }
  .portfolio-list li img {
    width: 100%;
    margin: 0 auto;
  }
}

.group:before,
.group:after {
  content: "";
  display: table
}

.group:after {
  clear: both
}

.group {
  zoom: 1
}

<section class="portfolio-container group">
  <ul class="portfolio-list group">
    <li>
      <a href="#">
        <img src="http://robgolbeck.com/demos/hover-overlay/images/thumb1.jpg">
      </a>
    </li>

  </ul>

如果使用字体很棒的图标，

content: '\f067';
font-family: FontAwesome;

对于类 .portfolio-list a:after

希望对您有所帮助。