Bootstrap 3.2.0 Глификоны не работают

Я новичок в бутстрапе, и его глификоны у меня не работают. После того, как я проверил код, font-family из glyphicon-user был "Helvetica Neue",​Helvetica,​Arial,​sans-serif, а не Glyphicons Halflings. Я что-то упустил или мне нужно изменить файл css.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<form>
    <div class="row">
        <div class="col-xs-4">
            <div class="input-group">
                <span class="input-group-addon">
                    <span class="glyphicon-user"></span>
                </span>
                <input type="text" class="form-control" placeholder="Username"/>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Amount">
                <span class="input-group-addon">.00</span>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" placeholder="US Dollar">
                <span class="input-group-addon">.00</span>
            </div>
        </div>
    </div>
</form>
</body>
</html>

css twitter-bootstrap-3 glyphicons
person Thant Sin Aung    schedule 23.08.2014    source источник

Ответы (3)


arrow_upward
10
arrow_downward

Вам нужно добавить класс glyphicon.

Таким образом, ваш диапазон должен быть:

<span class="glyphicon glyphicon-user"></span>

Как показано в документации: http://getbootstrap.com/components/#glyphicons-how-to-use< /а>

person Catalin MUNTEANU    schedule 23.08.2014
comment
Если бы ОП потратил 10 секунд на чтение документации, он бы знал об этом. +1 - person j08691; 24.08.2014
comment
Спасибо, извините за мой неосторожный вопрос. - person Thant Sin Aung; 24.08.2014

arrow_upward
2
arrow_downward

Недостаточно назвать глиф, вы также должны использовать класс glyphicon.

<span class="glyphicon glyphicon-user"></span>

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

person TSK007    schedule 23.08.2014

arrow_upward
0
arrow_downward

Следуйте инструкциям по работе со значками Glyphicons в вашем проекте boostrap:

  1. добавьте папку шрифтов в свой проект из недавно загруженного с http://getbootstrap.com и приведенного ниже кода для примера

<span class="glyphicon glyphicon-user"></span>
enter image description here

Спасибо!

person Mohd Abdul Baquee    schedule 13.01.2015