Добавление Glyphicon к input

D2207
D2207
626
4
Добрый день! Перечитал вдоль и поперёк Вашу статью, иконки я подключил, а как их использовать с инпутом очевидно не понял, вроде сделал всё как в примере. Никаких дополнительных стилей на инпуте нет. Скопировал CSS и HTML разметку - получил это)

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

  1. D2207
    D2207
    13.08.2020, 13:41
    Ага, вроде нашёл юникод
  2. D2207
    D2207
    13.08.2020, 12:04
    Как узнать код иконок? На сайте Glyphicon эти коды не указаны(
  3. D2207
    D2207
    13.08.2020, 11:40
    Большое спасибо, то что нужно! К каждой кнопке, стрелке, инпуту надо писать свой CSS файл? Я правильно Вас понял? Есть способ попроще? Более схожий с бутстрапом3. Может сторонняя библиотека?
  4. Александр Мальцев
    Александр Мальцев
    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>