CSS 使用图像而不是 Bootstrap 的字形

Question

提问by Mistalis

I would like to use a custom image in an input-groupinstead of a Bootstrap glyphicon without padding bottom(my image touch the bottom of the button), as you can see on this picture:

我想在没有填充底部的情况下使用自定义图像input-group而不是 Bootstrap glyphicon （我的图像触摸按钮的底部），如您在此图片中所见：

Actually, I use Bootstrap's glyphicon glyphicon-search:

实际上，我使用 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>

My issue is that I fail to replace glyphicon by my picture in my search bar.

我的问题是我无法在搜索栏中用我的图片替换 glyphicon。

I've tried to create CSS to mimic those of Bootstrap, but it always render bad:

我试图创建 CSS 来模仿 Bootstrap 的那些，但它总是呈现不好：

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>

Note that my image is not square (60x37 px).

请注意，我的图像不是方形（60x37 像素）。

Here is the picture that should replace the glyphicon:

这是应该替换的图片glyphicon：

What is the best Bootstrap way to do that? Here is a Bootplyof my code.

什么是最好的 Bootstrap 方法？这是我的代码的 Bootply。

Thanks! :)

谢谢！:)

Answer 1

采纳答案by tmg

You can use simple imginside .input-group-addoninstead of span.glyphiconand with some negative margins you can get the result you want.

您可以使用 simple imginside.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 */
}

Updated Bootply

更新 Bootply

Answer 2

回答by Alexis B.

You should have a look on how the glyphicon spanworks: If you inspect it, you will see that the interesting part in this spanis actually its pseudo-element, the :beforethat calls a font of icons as a content.

你应该看看 glyphicon 是如何span工作的：如果你检查它，你会发现其中有趣的部分span实际上是它的伪元素，:before它调用图标字体作为内容。

A few solutions are actually possible to resolve your problem.

一些解决方案实际上可以解决您的问题。

Override

覆盖

One of the solution would be to override that pseudo element by redeclaring its content:

.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;
}

Demo 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

Custom span

自定义跨度

Another solution, which would probably be better, would be to actually create your own span with your own pseudo-element (CSS is similar to the last example, renaming the .glyphicon-searchpart obviously):
```

 
 
 Rechercher

```
Demo 2

另一个可能更好的解决方案是使用您自己的伪元素实际创建您自己的跨度（CSS 类似于上一个示例，.glyphicon-search显然重命名了该部分）：
```

 
 
 Rechercher

```
演示 2

Image

图片

Even if I personally prefer having the icon as a background image here (have a look on this question and its answers), declaring the icon as an image is another solution that works.
c.f. the answer of tmgabout that.

即使我个人更喜欢将图标作为这里的背景图像（看看这个问题及其答案），将图标声明为图像是另一种有效的解决方案。
参见tmg对此的回答。

About the rest

关于其余

To go beyond with your code, you should think about the fact that you are working in a form with an input[type="text"]as main input.

为了超越您的代码，您应该考虑这样一个事实，即您正在使用input[type="text"]作为主要输入的表单工作。

You'll have to submit this form and unless you deal with a click eventon this main span to submit your form, you'll have to declare your rechercherspan as an inputas well (type=“submit”).

您必须提交此表单，除非您在此主跨度上处理单击事件以提交表单，否则您还必须声明您的rechercher跨度input( type=“submit”)。

That would be semantically more correct and easier for you to deal with this button action in the future.

这在语义上会更正确，也更容易让您将来处理此按钮操作。

My final proposition would then be: (also considering the "custom" span icon solution)

我的最终提议是：（也考虑“自定义”跨度图标解决方案）

<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;
}

Demo 3

演示 3

About the responsive, just declare a min-widthon your label:

关于响应式，只需min-width在您的标签上声明一个：

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

Hope this makes sense. I'm open to any kind of suggestion, edit, etc...

希望这是有道理的。我愿意接受任何类型的建议、编辑等...

Bon chance!

好的机会！

Answer 3

回答by Naui Monclús

It's as easy as replace span glyphicon tag for your custom image tag forcing correct height and deleting top and bottom padding from text 'rechercher'.

就像为您的自定义图像标签替换 span glyphicon 标签一样容易，强制正确的高度并从文本“rechercher”中删除顶部和底部填充。

So, add this to your html:

因此，将其添加到您的 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>

So, add this to your css:

因此，将其添加到您的 css 中：

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

Here you have an example: http://www.bootply.com/CAPEgZTt3J

这里有一个例子：http: //www.bootply.com/CAPEgZTt3J

Answer 4

回答by Ahmed Salama

You can override .glyphiconand set your image as a backgroundfor it and remove its icon

您可以覆盖.glyphicon并将您的图像设置为 a backgroundfor it 并删除其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/

Answer 5

回答by mmativ

This is my attemp, i hope this one can help you. i use absolute. Just try to view in full page, i working the responsive design.

这是我的尝试，希望可以帮到你。我用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>

Answer 6

回答by Sanjeev Kumar

Here is the css that will replace the search icon

这是将替换搜索图标的 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;
 }

You also need to resize the search icon because the parent element has padding.

您还需要调整搜索图标的大小，因为父元素有填充。

Answer 7

回答by hdev

You have to hide the default glyphicon then use custom image. Try these lines:

您必须隐藏默认字形，然后使用自定义图像。试试这些行：

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

Answer 8

回答by Quack

One way would be to use a background-image on the input-group-addon + some padding-left and remove the glyphicon entirely:

一种方法是在 input-group-addon 上使用背景图像 + 一些 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>

You need of course to change the background-position, background-size, padding-left so it fits your image.

您当然需要更改背景位置、背景大小、左边距以使其适合您的图像。

Adjust the background-sizeto define the size of the image, change the background-positionto position the image inside the spanand change the padding-leftvalue to move the text further to the right.

调整background-size以定义图像的大小，更改background-position以将图像定位在内部span并更改padding-left值以将文本进一步向右移动。

CSS 使用图像而不是 Bootstrap 的字形

提问by Mistalis

采纳答案by tmg

回答by Alexis B.

Override

覆盖

Custom span

自定义跨度

Image

图片

About the rest

关于其余

回答by Naui Monclús

回答by Ahmed Salama

回答by mmativ

回答by Sanjeev Kumar

回答by hdev

回答by Quack

相关推荐

最近更新

标签

CSS 使用图像而不是 Bootstrap 的字形

提问by Mistalis

采纳答案by tmg

回答by Alexis B.

Override

覆盖

Custom span

自定义跨度

Image

图片

About the rest

关于其余

回答by Naui Monclús

回答by Ahmed Salama

回答by mmativ

回答by Sanjeev Kumar

回答by hdev

回答by Quack

相关推荐

CSS 如何调查 Firefox 中的“无法加载样式表”消息？

是否可以使用 CSS calc() 来计算宽高比？

CSS 在 RC.1 中，某些样式无法使用绑定语法添加

CSS 有没有办法编辑新的谷歌表单的css？

相关推荐

最近更新

标签