插入鏈接

Question

如何將facebook字體超棒圖標變成鏈接？無論何時插入鏈接，它都會將圖標從圖片框中移出。我想將其他社交媒體圖標放在facebook圖標旁邊，但目前我只是想解決讓圖標鏈接到Facebook的問題。

CSS

.polaroid-images a { 
background: white; 
display: inline; 
float: left; 
margin: 0 15px 70px; 
padding: 10px 10px 25px; 
text-align: center; 
text-decoration: none; 
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3); 
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3); 
box-shadow: 0 4px 6px rgba(0, 0, 0, .3); 
-webkit-transition: all .15s linear; 
-moz-transition: all .15s linear; 
transition: all .15s linear; 
z-index: 0; 
position: relative; 
} 

.polaroid-images a, 
:after { 
color: #333; 
font-size: 20px; 
content: attr(title); 
position: relative; 
top: 15px; 
} 

.polaroid-images img { 
    display: block; 
    width: inherit; 
} 

.polaroid-images a, 
i:nth-child(3n) { 
-webkit-transform: rotate(-24deg); 
-moz-transform: rotate(-24deg); 
transform: rotate(-24deg); 
} 

.polaroid-images a:hover { 
-webkit-transform: rotate(0deg); 
-moz-transform: rotate(0deg); 
transform: rotate(0deg); 
-webkit-transform: scale(1.2); 
-moz-transform: scale(1.2); 
transform: scale(1.2); 
z-index: 10; 
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7); 
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7); 
box-shadow: 0 10px 20px rgba(0, 0, 0, .7); 
} 

.polaroid-images i { 
position: relative; 
font-size: 1em; 
top: 15px; 
margin-right: .5em; 
color: #3b5998; 
} 

HTML

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

<div class="polaroid-images"> 
    <a href="" title="Alex"><img height="200" 
    src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island" 
    title="Alex" class=fishes /><i class="fa fa-facebook fa-3x"></i></a> 
</div> 

Answer 1

因此，截至目前您有您的包裹整卡的鏈接。除非你想讓整個卡片鏈接到Facebook，否則你應該刪除它。這是我會做：

.polaroid-images div { 
 
background: white; 
 
display: inline; 
 
float: left; 
 
margin: 0 15px 70px; 
 
padding: 10px 10px 25px; 
 
text-align: center; 
 
text-decoration: none; 
 
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3); 
 
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3); 
 
box-shadow: 0 4px 6px rgba(0, 0, 0, .3); 
 
-webkit-transition: all .15s linear; 
 
-moz-transition: all .15s linear; 
 
transition: all .15s linear; 
 
z-index: 0; 
 
position: relative; 
 
} 
 

 
.polaroid-images div, 
 
:after { 
 
color: #333; 
 
font-size: 20px; 
 
content: attr(title); 
 
position: relative; 
 
top: 15px; 
 
} 
 

 
.polaroid-images img { 
 
    display: block; 
 
    width: inherit; 
 
} 
 

 
.polaroid-images div, 
 
i:nth-child(3n) { 
 
-webkit-transform: rotate(-24deg); 
 
-moz-transform: rotate(-24deg); 
 
transform: rotate(-24deg); 
 
} 
 

 
.polaroid-images div:hover { 
 
-webkit-transform: rotate(0deg); 
 
-moz-transform: rotate(0deg); 
 
transform: rotate(0deg); 
 
-webkit-transform: scale(1.2); 
 
-moz-transform: scale(1.2); 
 
transform: scale(1.2); 
 
z-index: 10; 
 
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7); 
 
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7); 
 
box-shadow: 0 10px 20px rgba(0, 0, 0, .7); 
 
} 
 

 
.polaroid-images i { 
 
position: relative; 
 
font-size: 1em; 
 
top: 15px; 
 
margin-right: .5em; 
 
color: #3b5998; 
 
}

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

 
<div class="polaroid-images"> 
 
    <div title="Alex"> 
 
    <img height="200" 
 
    src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island" 
 
    title="Alex" class=fishes /> 
 
    
 
    <a href="https://www.facebook.com/"><i class="fa fa-facebook fa-3x"></i></a> 
 
    </div> 
 
</div>

從本質上講，我只是刪除從整個塊a標籤，只有把它包圍繞四個FB圖標。然後我將你的容器改爲一個div，並相應地改變了風格。

希望這會有所幫助！