Использовать изображение вместо глифов-бутстрапов

Ответ 1

Вы можете использовать простой img внутри .input-group-addon вместо span.glyphicon и с некоторыми отрицательными полями вы можете получить желаемый результат.

HTML

<div class="input-group">
   <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">      
   <span class="input-group-addon">
       <img src="http://i.stack.imgur.com/vr0uy.png">
       <span class="hidden-xs text-upper-style">Rechercher</span>
   </span>      
</div>

CSS

.rechercheProduit .input-group-addon img{
  height: 24px;
  margin-right: -16px;
  margin-bottom: -6px;
  vertical-align:text-bottom; /* align the text */
}

Обновлено Bootply

Ответ 2

Вы должны посмотреть, как работает глификон span: Если вы проверите его, вы увидите, что интересная часть этого span на самом деле является его псевдоэлементом, :before, который вызывает шрифт значков в качестве контента.

На самом деле можно решить несколько проблем.

Override

• Одним из решений было бы переопределить этот псевдоэлемент на Обновление содержимого:

  .rechercheProduit .input-group-addon {
    /* Declaring the parent as relative so the .glyphicon-search child span 
       as a position absolute to its parent.. 
       That probably doesn't make any sense. */
    position: relative;
  }
  .rechercheProduit .glyphicon-search {
    /* 'absolute' in the .input-group-addon context */
    position: absolute; 
    top: auto;
    bottom: 0;
    left: 5px;
    height: 80%;
    width: auto; 
    overflow: hidden;
  }
    .rechercheProduit .glyphicon-search:before {
      content: '';
      display: block;
      width: 50px; /* Generic width */
      height: 100%;
      background: url('http://i.stack.imgur.com/vr0uy.png') no-repeat;
      background-size: auto 100%;
    }
  .rechercheProduit .text-upper-style {
    /* relative to its context. Especially here to deal with the display order. */
    position: relative;
    margin-left: 20px;
  } 
  

  Демо 1

Пользовательский диапазон

2. Другим решением, которое, вероятно, было бы лучше, было бы фактически создайте свой собственный диапазон с помощью своего собственного псевдоэлемента (CSS - это как и в последнем примере, переименование части .glyphicon-search очевидно):

   <span class="input-group-addon">
     <span class="search-icon"></span>
     <span class="hidden-xs text-upper-style">
     Rechercher</span>
   </span>
   

   Демо 2

   ---

Изображение

3. Даже если я лично предпочитаю иметь значок в качестве фонового изображения здесь (посмотрите этот вопрос и его ответы), объявив значок в качестве изображения - другое решение, которое работает.

   c.f. ответ tmg об этом.

   ---

Об остальных

Чтобы выйти за пределы вашего кода, вы должны подумать о том, что вы работаете в форме с input[type="text"] в качестве основного ввода.

Вам нужно отправить эту форму, и если вы не будете иметь дело с событием клика на этом основном прогоне, чтобы отправить свою форму, вам также нужно объявить ваш диапазон повторного поиска как input (type="submit").

Это было бы семантически более правильным и более легким для вас, чтобы иметь дело с этим действием кнопки в будущем.

Моим окончательным предложением было бы следующее: (также учитывая "пользовательское" решение значка диапазона)

<div class="input-group">
  <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">
  <label class="input-group-addon">
    <span class="search-icon"></span>
    <input type="submit" value="Rechercher" class="hidden-xs text-upper-style" />
  </label>
</div>

-

.text-upper-style {
  background: none;
  text-transform: uppercase;
  border: 0;
  outline: 0;
}
.rechercheProduit .input-group-addon {
  border: 0;
}

Демо 3

О отзывчивом, просто объявите min-width на вашей метке:

.rechercheProduit .input-group-addon {
  min-width: 40px;
  overflow: hidden;
}

Надеюсь, это имеет смысл. Я открыт для любого предложения, редактирования и т.д.

Случайный шанс!

Ответ 3

Это так же просто, как заменить тег glyphicon span для вашего пользовательского тега изображения, вызывая правильную высоту и удаляя верхнее и нижнее дополнение из текстового "рекурсора".

Итак, добавьте это в свой html:

  <span class="input-group-addon">
    <img height="25" src="http://i.stack.imgur.com/vr0uy.png" alt="custom-magnifier">
    <span class="hidden-xs text-upper-style">
      Rechercher</span>
  </span>

Итак, добавьте это в свой css:

.rechercheProduit .input-group-addon {
  padding: 0 12px;
}
.rechercheProduit .input-group-addon {
  vertical-align: bottom;
}

Здесь у вас есть пример: http://www.bootply.com/CAPEgZTt3J

Ответ 4

Вот css, который заменит значок поиска

.glyphi {
 background: rgba(0, 0, 0, 0) url("http://i.stack.imgur.com/vr0uy.png") no-repeat scroll 0 0 / contain;
 display: inline-block;
 font-style: normal;
 font-weight: 400;
 height: 16px;
 line-height: 1;
 position: relative;
 top: 1px;
 width: 60px;
 }

Вам также нужно изменить размер значка поиска, потому что родительский элемент имеет дополнение.

Ответ 5

Вам нужно скрыть глификон по умолчанию, а затем использовать пользовательский образ. Попробуйте следующие строки:

.glyphicon-search::before {
    content:none!important;
}
.glyphicon-search {
    background-image:url(../ur-image);
    height:20px;
    width:20px;
    background-repeat:no-repeat;
    background-size:cover;
}

Ответ 6

Одним из способов было бы использовать фоновое изображение в add-group-addon + some padding-left и полностью удалить глификон:

* {
  border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
  border: 0px;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit:hover {
  color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
  border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
  -moz-border-radius: 0;
  -webkit-border-w: 0;
  border-radius: 0;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
  background-image: url("http://i.stack.imgur.com/vr0uy.png");
  background-position: 6px 3px;
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 38px;
}
.rechercheProduit .input-group-addon:hover {
  color: #fbba00;
}
.text-upper-style {
  text-transform: uppercase;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-8 col-md-6">
  <form class="form-horizontal rechercheProduit">
    <div class="input-group">
      <input class="form-control" placeholder="Rechercher un produit, une référence ..." type="text">
      <span class="input-group-addon">
        <span class="text-upper-style">
          Rechercher</span>
      </span>
    </div>
  </form>
</div>

Ответ 7

Это мой attemp, я надеюсь, что это может вам помочь. Я использую absolute. Просто попробуйте просмотреть на полной странице, я работаю над отзывчивым дизайном.

* {
    border-radius: 0 !important;
}
.rechercheProduit .input-group-addon {
  border: 0px;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit:hover {
  color: #fbba00;
}
.rechercheProduit .form-control,
.rechercheProduit .input-group-addon {
  border: solid 2px #004392;
}
.rechercheProduit .input-group-addon {
  -moz-border-radius: 0;
  -webkit-border-w: 0;
  border-radius: 0;
  color: #ffffff;
  background: #004392;
  cursor: pointer;
}
.rechercheProduit .input-group-addon:hover {
  color: #fbba00;
}

.text-upper-style {
  text-transform: uppercase;
  padding-left: 20px;
}
.glyphicon-search:before {
    background: url(http://i.stack.imgur.com/vr0uy.png)center center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 25px;
    width: 42px;
    content: '';
    z-index: 99;
    position: absolute;
    top: -15px;
    left: -8px;
}
.glyphicon-search:before{
  content: '' !important;
}
@media screen and (max-width: 767px){
  .cus-icon{
    padding: 0 10px;
  }
  
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-8 col-md-6">
  <form class="form-horizontal rechercheProduit">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Rechercher un produit, une référence ...">
      <span class="input-group-addon">
        <span aria-hidden="true" class="glyphicon glyphicon-search cus-icon"></span>
        <span class="hidden-xs text-upper-style">
          Rechercher</span>
      </span>
    </div>
  </form>
</div>

Ответ 8

Вы можете переопределить .glyphicon и установить для него свое изображение как background и удалить его icon

.rechercheProduit .input-group-addon span.glyphicon{
    background: url(http://i.stack.imgur.com/vr0uy.png);
    background-size: 100% 100%;
    height: 24px;
    width: 38px;
    vertical-align: text-bottom;
    margin: -6px -13px 0 0;
    top: auto;
    bottom: -6px;
    z-index: 0;
}

.rechercheProduit .input-group-addon span.glyphicon:before{
    content:'';  // To remove its default icon
}

https://jsfiddle.net/ms5e0535/