web-dev-qa-db-ja.com

ブートストラップのグリフィコンの代わりに画像を使用する

Bootstrapグリフィコン）の代わりにinput-groupでカスタムイメージを使用したいbottom （私の画像はボタンの下部をタッチします）、この写真でわかるように： enter image description here

実際、Bootstrapのglyphicon glyphicon-searchを使用します。

<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"></span>
        <span class="hidden-xs text-upper-style">
          Rechercher</span>
      </span>
</div>

enter image description here

私の問題は、検索バーのグリフィコンを自分の写真に置き換えることができないことです。

BootstrapのCSSを模倣するためにCSSを作成しようとしましたが、常に正しくレンダリングされません。

[〜＃〜] css [〜＃〜]

.glyphi {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    float: left;
    display: block;
}
.glyphi.search {
    background: url(../img/header/search.png);
    background-size: cover; 
}
.glyphi.normal { 
    width: 28px; //But Bootstrap glyphicon is 16x16...
    height: 16px;
}

[〜＃〜] html [〜＃〜]

<span class="glyphicon glyphicon-search"></span>

私の画像は正方形（60x37 px）ではないことに注意してください。

glyphiconを置き換える画像を次に示します。

enter image description here

最良のBootstrap=それを行う方法は何ですか？ ここにBootplyがあります 私のコードの。

ありがとう！ :)

csstwitter-bootstraptwitter-bootstrap-3responsive-design
15
Mistalis

.input-group-addonの代わりにspan.glyphiconの内部でシンプルなimgを使用でき、いくつかの負のマージンを使用して、必要な結果を得ることができます。

[〜＃〜] 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 */
}

Updated Bootply

7
tmg

グリフィコンspanの仕組みを確認する必要があります。これを調べると、このspanの興味深い部分は実際にはpseudoであることがわかります。 -element、アイコンのフォントをコンテンツとして呼び出す:before。

Screenshot of the Glyphicon span behaviour in the DOM

問題を解決するために実際にいくつかの解決策があります。

オーバーライド

  1. 解決策の1つは、そのコンテンツを再宣言することにより、その擬似要素をオーバーライドすることです。

    .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

カスタムスパン

  1. おそらくより良い別の解決策は、実際に独自の疑似要素を使用して独自のスパンを作成することです（CSSは最後の例に似ており、明らかに.glyphicon-search部分の名前を変更します）：

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

    デモ2

画像

  1. ここでアイコンを背景画像として使用することを個人的に好みますが（ この質問とその回答 を見てください）、アイコンを画像として宣言することも有効なソリューションです。

    c.f.それについてのtmgの答え。

残りについて

コードを超えて進むには、input[type="text"]をメイン入力として使用するフォームで作業しているという事実を考慮する必要があります。

このフォームを送信する必要があり、フォームを送信するためにこのメインスパンでクリックイベントを処理しない限り、rechercherinputとしてのスパン（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;
}

デモ

レスポンシブについては、ラベルでmin-widthを宣言するだけです：

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

これが理にかなっていることを願っています。私はあらゆる種類の提案、編集などを受け入れることができます...

ボンチャンス！

4
Alexis B.

カスタムイメージタグのスパングリフィコンタグを置き換えるだけで、正しい高さを強制し、テキスト「rechercher」から上下のパディングを削除できます。

したがって、これを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

2
Naui Monclús

これが私の試みです。これがあなたのお役に立てば幸いです。 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>
1
mmativ

検索アイコンを置き換える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;
 }

親要素にはパディングがあるため、検索アイコンのサイズも変更する必要があります。

1
Sanjeev Kumar

デフォルトのグリフィコンを非表示にして、カスタム画像を使用する必要があります。これらの行を試してください：

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

.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/

1
Ahmed Salama

1つの方法は、input-group-addonでbackground-image + 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>

もちろん、画像に合うように、背景位置、背景サイズ、パディング左を変更する必要があります。

background-size画像のサイズを定義するには、background-positionは、画像をspan内に配置し、padding-left値。テキストをさらに右に移動します。

1
Quack