logo标签列表

使用图片代替Bootstrap的glyphicon

csstwitter-bootstraptwitter-bootstrap-3responsive-design
15
我想在中使用自定义图像，而不是Bootstrap glyphicon，底部没有填充（我的图像接触按钮底部），如您在此图片中所见：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

我的问题是，我无法在搜索栏中用我的图片替换glyphicon。我尝试创建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>
请注意，我的图片不是正方形的（60x37像素）。
这是应该替换 glyphicon 的图片：

enter image description here

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

谢谢！:)

你不想对HTML进行任何更改吗？ - tmg
你可以随意更改HTML，只要它呈现出与我的图片相同的效果，并且具有响应性（在小屏幕上呈现良好） :-) - Mistalis
8个回答
8

您可以在.input-group-addon 内使用简单的img ，而不是使用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

1
目前来看，这是最好的答案。谢谢！ - Mistalis
5
您需要了解一下glyphicon span 的工作原理： 如果您检查它，您会发现这个中有趣的部分实际上是它的伪元素，调用图标字体作为内容的:before。

在DOM中呈现Glyphicon span行为的屏幕截图

实际上有几种解决方案可以解决您的问题。

重写

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

自定义跨度

  1. 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-search part obviously):

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

    Demo 2

图像

  1. 即使我个人更喜欢将图标作为背景图像（请参阅此问题及其答案），将图标声明为图像也是可行的解决方案。

    请参考tmg的回答。

关于其余部分

要在代码中发挥更大的作用，您应该考虑您正在使用一个具有主输入input[type="text"]的表单。

你必须提交这个表单，除非你处理这个主span上的点击事件来提交你的表单，你也必须将你的rechercher span声明为一个input （类型=“submit”）。

这将在语义上更正确，并且在将来处理此按钮操作时更容易。

我的最终建议是：

（还考虑了“自定义” span 图标解决方案） 
<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;
}

希望这个能有意义。我欢迎任何建议，修改等......

祝你好运！

嘿，谢谢你的（完整）回答！我很喜欢阅读你提到的不同想法。我喜欢你提出的第二种方式，但在小屏幕上渲染效果不佳 :-(。别担心，这不需要发布，这个搜索栏只是更新一个AngularJS ng-model！PS：你的解决方案#1的URL返回404。 - Mistalis
这3个演示现在已经更新，所以第一个链接可以正常工作，并且关于响应式设计的2行代码（min-width和overflow: hidden）现在已经在所有地方声明。虽然很高兴能够帮到你。 - Alexis B.
Mistalis，你解决了你的问题吗？最终你选择了哪种方式？ - Alexis B.
你提供了很多解决方案，所以我给了你赏金。 你的第二个解决方案表现得非常好，但是tmg的解决方案似乎更简单（代码更少，更可重用），并且更符合我在这种特定情况下想要的！ :-) - Mistalis
2

只需将 span glyphicon 标签替换为您的自定义图像标签，强制正确的高度并从文本“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

您需要隐藏默认的glyphicon，然后使用自定义图像。尝试以下几行代码：

.glyphicon-search::before {
    content:none!important;
}
.glyphicon-search {
    background-image:url(../ur-image);
    height:20px;
    width:20px;
    background-repeat:no-repeat;
    background-size:cover;
}
我宁愿不覆盖Bootstrap的类（我可以正常使用glyphicon-search）...此外，您的回答并没有比Sanjeev K的回答更有价值。 - Mistalis
1
一种方法是在输入组附加项上使用背景图像，加上一些左边距，并完全删除 glyphicon： 

* {
  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值来将文本向右移动更远。
谢谢您的回答，但我的主要目标之一是“没有底部填充（我的图像触碰按钮底部），正如我在问题中所说的那样:-)。正如您在图片中所看到的那样。”，似乎您的代码不符合这个条件。 - Mistalis
实际上没有填充。就像我说的那样：你只需要调整背景大小（例如设置为“contain”）。我编辑了我的答案以向您展示我的意思。 - Quack
1
这是我的尝试，我希望这个可以帮助你。我使用了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>

有趣。你认为这段代码能用来改变另一个Bootstrap的glyyhicon吗，还是太具体了？ - Mistalis
1
你可以覆盖 .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/

根据你的观点，与tmg的解决方案相比，这个解决方案有什么好处？:-) - Mistalis
Tmg的解决方案在这种情况下当然是最好的。我只是提供我的解决方案，以防你不能或不想更改你的HTML。但如果可能改变你的HTML结构，那么另一个解决方案对你来说是最好的。 - Ahmed Salama
1
这里是可以替换搜索图标的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;
 }

你还需要调整搜索图标的大小，因为父元素有填充。
谢谢您的回答。您会建议如何“调整搜索图标的大小，因为父元素有填充”？ :) - Mistalis
图标的高度应根据您的Bootply最大为16像素。 - Sanjeev Kumar
请看我的回答的第一张截图：图片更大。使用您的代码，它非常小 :) - Mistalis
实际上，我不得不调整大小以适应可用空间。你可以尝试调整大小，但一定要确保将相同的高度扩展到输入框中。 - Sanjeev Kumar
@Mistalis，我找到了另一种方法来实现这个，而不是使用glyohicon图标，我使用了CSS伪元素，请看一下这个Fiddle：https://jsfiddle.net/sanjeevks121/cppgw36p/2/ - Sanjeev Kumar
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接