如何在字体真棒图标链接下方添加添加文本？答案

【问题标题】：How do I add Add text below font awesome icon Links?如何在字体真棒图标链接下方添加添加文本？
【发布时间】：2017-05-08 05:11:24
【问题描述】：

我正在尝试在我的 Blogger 模板中的 font-awesome Icons 下添加一些文本。这是我想要实现的图像

image of Look I want to achieve

但到现在我已经做到了这一点

image of progress till now

如何在每个图标下添加 clicable 链接，如第二张图片所示？由于我是新手，如果您还可以帮助我了解字体系列及其样式，那将是一个巨大的帮助。

附言我在 blospot 托管博客上使用自定义模板。我已经尝试了以下代码：

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

【问题讨论】：

标签： html css fonts font-awesome blogger

【解决方案1】：

您可以在a 标签中添加一个span 标签，这样就可以在您的文本上应用不同的样式（如margin、color），而不会影响font-awesome 图标。

.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】：

以上答案很好，但如果您遇到困难，可能对您没有帮助。此外，flexbox 还没有得到很好的支持。

这就是我要做的，去掉花里胡哨的东西，我添加了边框，这样你就可以看到发生了什么。

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

基本上，您在文本周围使用跨度，并将两者像乐高积木一样堆叠。 ;-)

HTH、gl、hf。 :)

【讨论】：

【解决方案3】：

使用 CSS 弹性盒。使用 display: flex 使您的 li a 成为弹性容器并应用对齐规则，例如：

.sidebar-social a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 14px;
    color: #444;
    text-decoration: none;
}

同时从<i> 中删除额外的边距。

看看下面的工作 sn-p：

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

希望这会有所帮助！

【讨论】：

【解决方案4】：

示例：

<div class="div class">

    <i class="fas fa-icon"></i> "put icon below the text"

    <h3>Some Text</h3>

    <p>Some text</p>

</div>

【讨论】：