Содержание:
Добавление Glyphicon к input
Добрый день!
Перечитал вдоль и поперёк Вашу статью, иконки я подключил, а как их использовать с инпутом очевидно не понял, вроде сделал всё как в примере. Никаких дополнительных стилей на инпуте нет. Скопировал CSS и HTML разметку — получил это)
Перечитал вдоль и поперёк Вашу статью, иконки я подключил, а как их использовать с инпутом очевидно не понял, вроде сделал всё как в примере. Никаких дополнительных стилей на инпуте нет. Скопировал CSS и HTML разметку — получил это)
D2207
2020-08-13 11:40:26
Большое спасибо, то что нужно! К каждой кнопке, стрелке, инпуту надо писать свой CSS файл? Я правильно Вас понял? Есть способ попроще? Более схожий с бутстрапом3. Может сторонняя библиотека?
Александр Мальцев
2020-08-12 15:21:54
В статье примеры приведены для Bootstrap 3.
В Bootstrap 4 эту задачу можно решить так:
В 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>
Комментарии: 4