作为背景的fontawsome图标

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 :)简单快捷的方法。使字体成为图像。

示例 - fa football

fa plus

您可以制作自己的尺码。然后你可以使用该图像。

Ex :(由我上传的图片）

＆＃13;

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果使用字体真棒图标，那么

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

为班级.portfolio-list a:after

希望它有所帮助。

Answer 2

你可以做这样的事情

.portfolio-list a:after {
    content: '\f067';
    font-family: FontAwesome;
    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;
}

Answer 3

看看这个：

＆＃13;

＆＃13;

.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:after {
    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;
    content: '\f067';
    font-family: FontAwesome;
    font-size: 30px
    }

  .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
    }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<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>

＆＃13;

＆＃13;

＆＃13;