Brandon Pierceのアイコンを円形の3Dボタンに置​​き換えます

Question

Brandon Pierceのhttps://css-tricks.com/circular-3d-buttons/を使用していますが、「fontello」アイコンをこのアイコンのように自分の好きなアイコンで置き換えたいとします。https://image.flaticon.com/icons/svg/451/451694.svg。 私はちょうどそれを完了するように見えることはできません！

アイコンクラスをバックグラウンドとして自分自身の「image1」クラスに置き換えようとしましたが、表示されませんでした。

助けてください！

 .nav1 { 
    list-style: none; 
    text-align: center; 
} 

.nav1 li { 
    position: relative; 
    display: inline-block; 
    margin-right: -4px; 
} 

.nav1 li:before { 
    content: ""; 
    display: block; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #fff; 
    width: 100%; 
    height: 1px; 
    position: absolute; 
    top: 50%; 
    z-index: -1; 
} 

.nav1 a { 
    display: block; 
    background-color: #f7f7f7; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7)); 
    background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
    background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
    color: #a7a7a7; 
    margin: 36px; 
    width: 144px; 
    height: 144px; 
    position: relative; 
    text-align: center; 
    line-height: 144px; 
    border-radius: 50%; 
    box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff; 
} 

.nav1 a:before { 
    content: ""; 
    display: block; 
    background: #fff; 
    border-top: 2px solid #ddd; 
    position: absolute; 
    top: -18px; 
    left: -18px; 
    bottom: -18px; 
    right: -18px; 
    z-index: -1; 
    border-radius: 50%; 
    box-shadow: inset 0px 8px 48px #ddd; 
} 

.nav1 a:hover { 
    text-decoration: none; 
    color: #555; 
    background: #f5f5f5; 
} 

/* Random class I made to replace icon by image */ 
.image1 { 
background: url("https://www.w3schools.com/css/trolltunga.jpg"); 
width: 100%; 
} 

HTML

<nav1> 
      <ul class="nav1"> 
       <li><a href="#" class="image1"></a></li> 
       <li><a href="#"></a></li> 
       <li><a href="#"></a></li> 
       <li><a href="#"></a></li> 
      </ul> 
     </nav1> 

Answer 1

はカップルの事を行う必要があります。ここにはdemoがあります。

これはあなたのアイコン

.image1:after { 
    background-image: url("https://image.flaticon.com/icons/svg/451/451694.svg"); 
    background-size: cover; 
    display: block; 
    content: ''; 
    width: 100%; 
    height: 100%; 
} 

が、それはこれがとても素晴らしいです

.nav1 a 
{ 
    ...... 
    box-sizing: border-box; 
    padding: 17px; 
}