Bootstrap

Как вставить в input шрифтовую иконку Glyphicon?

D2207

11.08.2020, 21:58

633

Добрый день!

Перечитал вдоль и поперёк эту статью.

Иконки подключил к странице, которая свёрстана на Bootstrap 4. Но, как их использовать в <input> очевидно не понял. Вроде сделал всё как в примере. Никаких дополнительных стилей на инпуте нет. Скопировал CSS и HTML разметку и получил это:

Вставка в input шрифтовой иконки Glyphicon

Комментарии: 4

D2207

13.08.2020, 13:41

Ага, вроде нашёл юникод

D2207

13.08.2020, 12:04

Как узнать код иконок? На сайте Glyphicon эти коды не указаны(

D2207

13.08.2020, 11:40

Большое спасибо, то что нужно! К каждой кнопке, стрелке, инпуту надо писать свой CSS файл? Я правильно Вас понял? Есть способ попроще? Более схожий с бутстрапом3. Может сторонняя библиотека?

Александр Мальцев

12.08.2020, 15:21

В статье примеры приведены для Bootstrap 3.
В Bootstrap 4 эту задачу можно решить так:

<!doctype html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link rel="stylesheet" href="css/font-glyphicons.css">
  <style>
    .name-user::before {
      content: "\e008";
      font-family: "Glyphicons Halflings";
      font-weight: 400;
      position: absolute;
      top: 50%;
      left: 0.5rem;
      height: 1rem;
      line-height: 1rem;
      transform: translateY(-0.5rem);
      color: #9e9e9e;
      z-index: 2;
      pointer-events: none;
    }

    .name-user input {
      padding-left: 2rem;
    }
  </style>

</head>

<body>

  <div class="container">

    <div class="form-group">
      <label for="name-user">Имя пользователя:</label>
      <div class="name-user position-relative">
        <input class="form-control" id="name-user">
      </div>
    </div>

  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
    crossorigin="anonymous"></script>
</body>

</html>