问题
I am trying to add some text under font-awesome Icons in my Blogger template. Here is the image of what I want to achieve
image of Look I want to achieve
But I have managed to achieve this till now
image of progress till now
How to I add clicable link under each icon as shown in the second image? As I am a newbie, it would be a huge help if you can also help me out with the font family and its styling.
p.s. I am using a custom template on blospot hosted blog. I have tried out following code:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
.sidebar-social {
margin: 0;
padding: 0;
}
.sidebar-social ul {
margin: 0;
padding: 5px;
}
.sidebar-social li {
text-align: center;
width: 31.9%;
margin-bottom: 3px!important;
background-color: #fff;
border: 1px solid #eee;
display: inline-block;
font-size: 10px;
}
.sidebar-social i {
display: block;
margin: 0 auto 10px auto;
width: 32px;
height: 32px;
margin: 10px auto 0;
line-height: 32px;
text-align: center;
font-size: 20px;
color: #444444;
}
.sidebar-social a i.fa-facebook:hover { color: #FF0000; }
.sidebar-social a i.fa-twitter:hover { color:#00ABE3 }
.sidebar-social a i.fa-instagram:hover { color:#FFD400 }
.sidebar-social a i.fa-pinterest:hover { color:#FF0000 }
.sidebar-social a i.fa-google-plus:hover { color:#cb2027 }
.sidebar-social a i.fa-flickr:hover { color:#FF57AE }
.sidebar-social a i.fa-500px:hover { color:#00ABE3 }
.sidebar-social a i.fa-youtube:hover { color:#FF1F25 }
.sidebar-social a i.fa-behance:hover { color:#FF57AE }<div class="sidebar-social">
<ul>
<li>
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i></a></li>
<li><a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i></a>
</li>
<li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i></a>
</li>
<li><a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i></a>
</li>
<li><a href="URL-HERE" title="Behance" target="_blank" rel="nofollow"><i class="fa fa-behance"></i></a>
</li>
<li><a href="URL-HERE" title="flickr" target="_blank" rel="nofollow"><i class="fa fa-flickr"></i></a>
</li>
<li><a href="URL-HERE" title="YouTube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i></a>
</li>
<li><a href="URL-HERE" title="500px" target="_blank" rel="nofollow"><i class="fa fa-500px"></i></a></li>
</ul>
</div>回答1:
You can just add a span tag in your a tag that way it would be possible to apply different styles (like margin, color) on your text without affecting the font-awesome icons.
.sidebar-social {
margin: 0;
padding: 0;
}
.sidebar-social ul {
margin: 0;
padding: 5px;
}
.sidebar-social li {
text-align: center;
width: 31.9%;
margin-bottom: 3px!important;
background-color: #fff;
border: 1px solid #eee;
display: inline-block;
font-size: 10px;
padding:0;
}
.sidebar-social i {
display: block;
margin: 0 auto 10px auto;
width: 32px;
height: 32px;
margin: 10px auto 0;
line-height: 32px;
text-align: center;
font-size: 20px;
color: #444444;
margin-top:0;
padding-top:5px;
}
.sidebar-social a{
text-decoration:none;
width:100%;
height:100%;
display:block;
margin:0;
padding:0;
}
.sidebar-social a span{
color:black;
font-size:10px;
padding:5px 0 10px 0;
display:block;
text-transform:uppercase;
font-family:'Josefin Sans';
letter-spacing:1px;
}
.sidebar-social a:hover i.fa-facebook { color: #FF0000; }
.sidebar-social a:hover i.fa-twitter { color:#00ABE3 }
.sidebar-social a:hover i.fa-instagram { color:#FFD400 }
.sidebar-social a:hover i.fa-pinterest { color:#FF0000 }
.sidebar-social a:hover i.fa-google-plus { color:#cb2027 }
.sidebar-social a:hover i.fa-flickr { color:#FF57AE }
.sidebar-social a:hover i.fa-500px { color:#00ABE3 }
.sidebar-social a:hover i.fa-youtube { color:#FF1F25 }
.sidebar-social a:hover i.fa-behance { color:#FF57AE }<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<div class="sidebar-social">
<ul>
<li>
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i>
<span>facebook</span></a></li>
<li><a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i><span>Google plus</span></a>
</li>
<li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i><span>twitter</span></a>
</li>
<li><a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i><span>Pinterest</span></a>
</li>
<li><a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i><span>Instagram</span></a>
</li>
<li><a href="URL-HERE" title="Behance" target="_blank" rel="nofollow"><i class="fa fa-behance"></i><span>Behance</span></a>
</li>
<li><a href="URL-HERE" title="flickr" target="_blank" rel="nofollow"><i class="fa fa-flickr"></i><span>Flickr</span></a>
</li>
<li><a href="URL-HERE" title="YouTube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i><span>Youtube</span></a>
</li>
<li><a href="URL-HERE" title="500px" target="_blank" rel="nofollow"><i class="fa fa-500px"></i><span>500 PX</span></a></li>
</ul>
</div>回答2:
Use CSS Flexbox. Make your li a a flex container using display: flex and apply alignment rules, like:
.sidebar-social a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 14px;
color: #444;
text-decoration: none;
}
Also remove extra margin from <i>.
Have a look at the working snippet below:
.sidebar-social {
margin: 0;
padding: 0;
}
.sidebar-social ul {
margin: 0;
padding: 5px;
}
.sidebar-social li {
text-align: center;
width: 31.9%;
margin-bottom: 3px!important;
background-color: #fff;
border: 1px solid #eee;
display: inline-block;
font-size: 10px;
}
.sidebar-social a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
font-size: 14px;
color: #444;
text-decoration: none;
}
.sidebar-social i {
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
font-size: 20px;
color: #444444;
}
.sidebar-social a i.fa-facebook:hover { color: #FF0000; }
.sidebar-social a i.fa-twitter:hover { color:#00ABE3 }
.sidebar-social a i.fa-instagram:hover { color:#FFD400 }
.sidebar-social a i.fa-pinterest:hover { color:#FF0000 }
.sidebar-social a i.fa-google-plus:hover { color:#cb2027 }
.sidebar-social a i.fa-flickr:hover { color:#FF57AE }
.sidebar-social a i.fa-500px:hover { color:#00ABE3 }
.sidebar-social a i.fa-youtube:hover { color:#FF1F25 }
.sidebar-social a i.fa-behance:hover { color:#FF57AE }<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<div class="sidebar-social">
<ul>
<li>
<a href="URL-HERE" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook"></i><span>Facebook</span></a></li>
<li><a href="URL-HERE" title="Google Plus" target="_blank" rel="nofollow"><i class="fa fa-google-plus"></i><span>Google Plus</span></a>
</li>
<li><a href="URL-HERE" title="Twitter" target="_blank" rel="nofollow"><i class="fa fa-twitter"></i><span>Twitter</span></a>
</li>
<li><a href="URL-HERE" title="Pinterest" target="_blank" rel="nofollow"><i class="fa fa-pinterest"></i><span>Pinterest</span></a>
</li>
<li><a href="URL-HERE" title="Instagram" target="_blank" rel="nofollow"><i class="fa fa-instagram"></i><span>Instagram</span></a>
</li>
<li><a href="URL-HERE" title="Behance" target="_blank" rel="nofollow"><i class="fa fa-behance"></i><span>Behance</span></a>
</li>
<li><a href="URL-HERE" title="flickr" target="_blank" rel="nofollow"><i class="fa fa-flickr"></i><span>Flickr</span></a>
</li>
<li><a href="URL-HERE" title="YouTube" target="_blank" rel="nofollow"><i class="fa fa-youtube"></i><span>YouTube</span></a>
</li>
<li><a href="URL-HERE" title="500px" target="_blank" rel="nofollow"><i class="fa fa-500px"></i><span>500px</span></a></li>
</ul>
</div>Hope this helps!
回答3:
Above answers are good, but maybe not helping you were you get stuck. Also, flexbox is not stellarly well supported yet.
Here's what I would do, stripped of bells & whistles, and I added borders so you see what's going on.
body {
font-size: 18px;
} /* Set a base font size of at least 12px, for accessibility */
ul {
display: block;
width: 100%;
height: auto;
border: solid 1px green;
overflow: hidden;
}
li {
display: block;
width: 8rem;
/* using rem you can size relatiuve to font size. Easier to make responsive and better accessibility */
height: 8rem;
padding: 1rem;
float: left;
overflow: hidden;
border: solid 1px yellow;
}
/* Do not forget hover, active and focus styles for accessibility */
a i,
a span {
display: block;
width: 100%;
height: 50%;
overflow: hidden;
border: solid 1px red;
text-align: center;
}
a i {font-size: 2rem!important;} /* Bootstrap being a penis, override */
a span {font-size: 1rem;}
Essentially you use a span around your text, and stack the two like lego's. ;-)
HTH, gl, hf. :)
来源：https://stackoverflow.com/questions/41285466/how-do-i-add-add-text-below-font-awesome-icon-links