2013-06-09 6 views
7

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

enter image description here

код Я использую

<div class=" btn-toolbar"> 
<div class="btn-group" title="vote"> 
<button class="btn icon-"> 
<span class="icon-thumbs-up"> vote <span class="icon-thumbs-down"> 
</button> 
<button class="btn icon-heart" title="subscribe to get latest updates"></button> 

</div> 
    <div class="btn-group"> 
    <button class="btn icon-edit" title="edit"></button> 
    <button class="btn icon-print" title="print"></button> 

</div> 
    <div class="btn-group"> 
    <button class="btn icon-facebook" title="share on facebook"></button> 
    <button class="btn icon-twitter" title="share on twitter"></button> 
    <button class="btn icon-google-plus" title="share on google+"></button> 


</div> 
</div> 

ответ

9

Вы не должны использовать иконки прямо на кнопку, но вместо того, чтобы добавить их в свой содержание. Кроме того, у вас очень серьезные синтаксические ошибки. <span> не является самозакрывающимся элементом, вам нужно делать </span> каждый раз, когда вы его используете. Однако в документации предлагается использовать <i></i>, но это нарушает чувства некоторых разработчиков. Во всяком случае, давайте использовать его в этом примере (тоже работает).

Когда нужна кнопка со значком, вы делаете:

<button class="btn" title="share on facebook"><i class="icon-facebook"></i></button> 

Когда вам нужен текст рядом со значком, просто добавьте его (обратите внимание на пробел после значка).

<button class="btn"><i class="icon-thumbs-up"></i> Like</button> 

Вы также можете использовать несколько значков.

<button class="btn"><i class="icon-thumbs-up"></i> Vote <i class="icon-thumbs-down"></i></button> 

Для более экспериментов, посмотрите на эту скрипку: http://jsfiddle.net/Frizi/h69je/2/

+0

Это может быть лучшей практикой, но вопрос приводит к более чистому коду, так что заслуживает надлежащего ответа. – irth

1

Fixed - используется следующий код для перезаписи

<span class="icon-thumbs-up"> <span style="font-family:Helvetica Neue, Helvetica, Arial, sans-serif; font-size:12px;" >vote</span> <span class="icon-thumbs-down"> 
Смежные вопросы