Html 插入链接

我怎样才能将facebook字体图标变成链接？每当我插入一个链接，它就会将图标推出图片的框架。我也想在facebook图标旁边放置其他社交媒体图标，但目前我只是想解决让图标链接到facebook的问题

CSS

HTML

---

因此，从现在起，您有一个链接正在包装您的整个卡。除非你想让整个卡片链接到Facebook，否则你可能应该删除它。下面是我要做的：

.polarioidimages div{
背景：白色；
显示：内联；
浮动：左；
利润率：0 15px 70px；
填充：10px 10px 25px；
文本对齐：居中；
文字装饰：无；
-webkit盒阴影：0 4px 6px rgba（0,0,0,3）；
-moz盒阴影：0 4px 6px rgba（0,0,0,3）；
盒影：0 4px 6px rgba（0,0,0,3）；
-webkit过渡：全部.15s线性；
-moz跃迁：均为.15s线性；
过渡：全部.15s线性；
z指数：0；
位置：相对位置；
}
.宝丽来影像组，
：之后{
颜色：#333；
字体大小：20px；
内容：attr（title）；
位置：相对位置；
顶部：15px；
}
.宝丽来影像{
显示：块；
宽度：继承；
}
.宝丽来影像组，
i：第n个孩子（3n）{
-webkit变换：旋转（-24度）；
-moz变换：旋转（-24度）；
变换：旋转（-24度）；
}
.宝丽来影像部：悬停{
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：规模（1.2）；
-moz变换：比例（1.2）；
转换：比例（1.2）；
z指数：10；
-webkit盒阴影：0 10px 20px rgba（0,0,0,7）；
-moz盒阴影：0 10px 20px rgba（0,0,0,7）；
盒影：0 10px 20px rgba（0,0,0,7）；
}
.宝丽来影像一{
位置：相对位置；
字号：1em；
顶部：15px；
右边距：.5em；
颜色：#3b5998；
}

---

因此，从现在起，您有一个链接正在包装您的整个卡。除非你想让整个卡片链接到Facebook，否则你可能应该删除它。下面是我要做的：

.polarioidimages div{
背景：白色；
显示：内联；
浮动：左；
利润率：0 15px 70px；
填充：10px 10px 25px；
文本对齐：居中；
文字装饰：无；
-webkit盒阴影：0 4px 6px rgba（0,0,0,3）；
-moz盒阴影：0 4px 6px rgba（0,0,0,3）；
盒影：0 4px 6px rgba（0,0,0,3）；
-webkit过渡：全部.15s线性；
-moz跃迁：均为.15s线性；
过渡：全部.15s线性；
z指数：0；
位置：相对位置；
}
.宝丽来影像组，
：之后{
颜色：#333；
字体大小：20px；
内容：attr（title）；
位置：相对位置；
顶部：15px；
}
.宝丽来影像{
显示：块；
宽度：继承；
}
.宝丽来影像组，
i：第n个孩子（3n）{
-webkit变换：旋转（-24度）；
-moz变换：旋转（-24度）；
变换：旋转（-24度）；
}
.宝丽来影像部：悬停{
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
变换：旋转（0度）；
-webkit转换：规模（1.2）；
-moz变换：比例（1.2）；
转换：比例（1.2）；
z指数：10；
-webkit盒阴影：0 10px 20px rgba（0,0,0,7）；
-moz盒阴影：0 10px 20px rgba（0,0,0,7）；
盒影：0 10px 20px rgba（0,0,0,7）；
}
.宝丽来影像一{
位置：相对位置；
字号：1em；
顶部：15px；
右边距：.5em；
颜色：#3b5998；
}

请添加一些相关代码。您的HTML在哪里？它的间距不正确，因此被截断，我刚刚编辑了它。请添加一些相关代码。您的HTML在哪里？它的间距不正确，因此被截断，我刚刚编辑了它。

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

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