插入链接

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，并相应地改变了风格。

希望这会有所帮助！