fontawsome Symbol als Hintergrund

Question

Ich versuche Bildergalerie wie diesen Link zu erstellen:

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

, dass HTML-Code ist:

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

und CSS-Code ist:

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

Aber statt happy.png Foto möchte ich plus fontawesome Symbol oder Bild hinzufügen Wie kann ich es tun?

Answer 1

Schauen Sie sich dies tun:

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

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

Answer 2

Verwenden Sie einfach diese site :) Einfache und schnellste Möglichkeit. Machen Sie die Schriftart zu einem Bild.

Probe - fa Fußball

fa Plus

Sie Ihre eigenen Größen machen. Dann können Sie dieses Bild verwenden.

Ex: (hochgeladenes Bild von mir)

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

Wenn dann font ehrfürchtige Icons,

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

für die Klasse .portfolio-list a:after

Hoffe, es hilft .

Answer 3

Man könnte so etwas wie dieses

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