2017-02-23 29 views
2

В начальной загрузке, кнопки с пиктограммами реализованы с использованием комбинации <button> и <span>:шрифта удивительная и самозагрузка кнопка с синтаксисом иконки

http://getbootstrap.com/components/#glyphicons-examples

<button type="button" class="btn btn-default" aria-label="Left Align"> 
    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span> 
</button> 

В шрифте удивительного, кнопки реализуются с помощью комбинации <a> и <i>:

http://fontawesome.io/examples/

<a class="btn btn-danger" href="#"> 
    <i class="fa fa-trash-o fa-lg"></i> Delete</a> 

Есть ли лучший способ? Или выбор этих тегов полностью произволен?

ответ

0
<div class="container"> 
    <h2>Glyphicon Examples</h2> 
    <p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>  
    <p>Envelope icon as a link: 
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a> 
    </p> 
    <p>Search icon: <span class="glyphicon glyphicon-search"></span></p> 
    <p>Search icon on a button: 
    <button type="button" class="btn btn-default"> 
     <span class="glyphicon glyphicon-search"></span> Search 
    </button> 
    </p> 
    <p>Search icon on a styled button: 
    <button type="button" class="btn btn-info"> 
     <span class="glyphicon glyphicon-search"></span> Search 
    </button> 
    </p> 
    <p>Print icon: <span class="glyphicon glyphicon-print"></span></p>  
    <p>Print icon on a styled link button: 
    <a href="#" class="btn btn-success btn-lg"> 
     <span class="glyphicon glyphicon-print"></span> Print 
    </a> 
    </p> 
</div> 
+3

Хотя этот фрагмент кода приветствуется и может оказать некоторую помощь, было бы [значительно улучшено, если бы оно включало объяснение] (// meta.stackexchange.com/q/114762) из ​​* how * и * why *, это решает проблема. Помните, что вы отвечаете на вопрос читателей в будущем, а не только на человека, который спрашивает сейчас! Пожалуйста, отредактируйте свой ответ, чтобы добавить объяснение, и укажите, какие ограничения и допущения применяются. –

3

Это полностью зависит от использования.

В бутстрапе вы можете использовать кнопки, используя комбинацию <a> и <i>. Аналогичным образом, в шрифтовых удивительных кнопках с иконками можно реализовать комбинацию <button> и <span>.

Например: Если нам нужно отправить форму и кнопка отправки содержит значок шрифта удивительного, то мы делаем это как this--

<button type="button" class="btn btn-default" aria-label="Left Align"> 
<span class="fa fa-trash-o fa-lg" aria-hidden="true"></span> 
</button> 

Другим пример: Если нужно использовать обычную ссылку и ссылка содержит загрузочный значок glyphicon, то мы можем сделать это как this--

<a class="btn btn-danger" href="#"> 
<i class="glyphicon glyphicon-align-left"></i> Delete</a>