リンクを挿入する

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タグを削除し、わずか4つのFBのアイコンの周りに包まれました。その後、コンテナをdivに変更し、それに応じてスタイルを変更しました。

希望すると便利です。