如何在“真棒字体"图标链接下方添加“添加文本"?

编程入门行业动态更新时间:2024-10-21 09:47:38

本文介绍了如何在“真棒字体"图标链接下方添加“添加文本"?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我正在尝试在Blogger模板中的字体真棒图标下添加一些文本.这是我想要实现的图像

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

我要实现的外观图片

但是到目前为止，我已经实现了这一目标

But I have managed to achieve this 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.我在blospot托管博客上使用了自定义模板. 我已经尝试了以下代码:

p.s. I am using a custom template on blospot hosted blog. I have tried out following code:

<head> <link rel="stylesheet" href="maxcdn.bootstrapcdn/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 }

推荐答案

您只需在a标签中添加span标签，就可以应用不同的样式(例如margin，)，而不会影响font-awesome图标.

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 }