Как выделить значок готового Font Awesome в Bootstrap 4 или Bootstrap-vue - PullRequest
Новая
       17

Как выделить значок готового Font Awesome в Bootstrap 4 или Bootstrap-vue

0 голосов
/ 11 ноября 2018

У меня что-то вроде этого:

enter image description here

Как мне увеличить ширину, чтобы граница также охватывала значок слева, например:

enter image description here

Мой HTML: 

.input-group-text {
  width: 48px;
  border-right: none;
  background-color: #ffffff;
}
[class^="fa-"], [class*=" fa-"] {
  display: inline-block;
  width: 100%;
}
.LoginInput {
  border-left: none;
  position: relative;
}
<b-input-group>
  <b-input-group-prepend>
    <span class="input-group-text"><i class="fa fa-user fa-lg"></i></span>
  </b-input-group-prepend>
  <b-form-input class="LoginInput" size="lg" placeholder="Username">
  </b-form-input>
</b-input-group>

<b-input-group>
  <b-input-group-prepend>
    <span class="input-group-text"><i class="fa fa-lock fa-lg"></i></span>
  </b-input-group-prepend>
    <b-form-input class="LoginInput" size="lg" type="password" placeholder="Password">
    </b-form-input>
</b-input-group>

1 Ответ

0 голосов
/ 11 ноября 2018

Я нашел это рабочее демо Джеймса Барнетта. Он использует великолепные иконки шрифта css для реализации позиции: absolute; на значке и отступе текста, чтобы реализовать то, что вы пытаетесь достичь. Он размещает значок и поле ввода внутри контейнера div.

HTML 

<div class="search">
  <span class="fa fa-search"></span>
  <input placeholder="Search term">
</div>

CSS 

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-    awesome.min.css");
  body { margin: 30px; }

.search {
  position: relative;
  color: #aaa;
  font-size: 16px;
 }

.search input {
  width: 250px;
  height: 32px;
  background: #fcfcfc;
  border: 1px solid #aaa;
  border-radius: 5px;
  box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}

.search input { text-indent: 32px;}
.search .fa-search { 
  position: absolute;
  top: 10px;
  left: 10px;
}

Найти полную тему здесь.

Надеюсь, это поможет.

...