Как добавить Добавить текст ниже font awesome icon Ссылки?

Я пытаюсь добавить текст под шрифтами-удивительными значками в моем шаблоне Blogger. Вот образ того, что я хочу достичьКак добавить Добавить текст ниже font awesome icon Ссылки?

image of Look I want to achieve

Но мне удалось достичь этого до сих пор

image of progress till now

Как добавить clicable ссылку под каждым значком, как показано в второе изображение? Поскольку я новичок, это будет огромной помощью, если вы также можете помочь мне с семейством шрифтов и его стилем.

p.s. Я использую собственный шаблон на блоге, размещенном на блоге. я опробовал следующий код:

<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 { 
 
\t 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; 
 
\t 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>

источник

2016-12-22 NotAGeek

Вы можете просто добавить span тег в вашем a теге таким образом можно было бы применять различные стили (например, margin, color) на ваш текст, не затрагивая font-awesome иконки.

.sidebar-social { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.sidebar-social ul { 
 
    margin: 0; 
 
    padding: 5px; 
 
} 
 

 
.sidebar-social li { 
 
\t 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; 
 
\t 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>

источник

2016-12-22 14:44:52 ab29007

Большое вам спасибо! Работал как шарм! Можете ли вы помочь мне немного больше? Значок меняет цвет, когда над ним нависает мышь. Есть ли способ изменить свой цвет, даже если мышь находится внутри серого поля? – NotAGeek

ОК. не могли бы вы дать мне некоторое время. Спасибо. – ab29007

ОК. Надеюсь, это то, что вы искали. если это так, то можете ли вы принять и перенести его. благодарю вас за терпение – ab29007

Используйте CSS Flexbox. Сделайте свой li a использование биоэтанола контейнера с помощью display: flex и применять правила выравнивания, как:

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

Посмотрите на рабочем фрагменте код ниже:

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

Надеется, что это помогает!

источник

2016-12-22 14:40:12

Выше ответы хороши, но, возможно, не помогает вам были вы застряли. Кроме того, 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;}

По существу, вы используете прокрутку вокруг своего текста и складываете два, как у Lego. ;-)

HTH, gl, hf. :)

источник

2016-12-22 15:02:58

Как добавить Добавить текст ниже font awesome icon Ссылки?

ответ

Смежные вопросы