Question

我想在NSString* str0 = @"Hello"; __weak NSString* str1 = [[NSString alloc] initWithFormat:@"%@", str0 ]; // warning: Assigning retained object to weak variable; object will be released after assignment __weak NSString* str2 = [NSString stringWithFormat:@"%@",str0]; NSLog(@"Result: str0 %@, str1 %@, str2 %@", str0, str1, str2);中使用自定义图片而不是Bootstrap glyphicon 而不填充底部（我的图片触摸按钮底部），正如您在此处看到的那样图片：

实际上，我使用Bootstrap的input-group：

glyphicon glyphicon-search

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

我试图创建CSS以模仿Bootstrap的那些，但它总是变坏：

CSS

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

HTML

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

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

以下图片应取代：

最好的Bootstrap方法是什么？ Here is a Bootply我的代码。

谢谢！：）

Answer 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 */
}

Updated Bootply

Answer 2

您应该看一下glyphicon span的工作原理：如果您检查它，您会发现此span中有趣的部分实际上是伪元素，:before将图标字体称为内容。

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

覆盖

其中一个解决方案是覆盖那个伪元素重新声明其内容：

.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

自定义范围

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

 
 
 Rechercher

```
Demo 2

图像

即使我个人更喜欢将图标作为背景图像在这里（看看this question and its answers），声明作为图像的图标是另一种有效的解决方案。

c.f。 tmg 的答案。

关于其余的

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

您必须提交此表单，除非您在此主要范围内处理点击事件以提交表单，否则您必须声明 rechercher 也可以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;
}

Demo 3

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

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

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

Bon chance!

Answer 3

为自定义图片代码替换span glyphicon标记非常简单，可以强制使用正确的高度，并从文本＆＃39; rechercher＆＃39;中删除顶部和底部填充。

所以，将它添加到你的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

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

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

Answer 5

您必须隐藏默认的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;
}

Answer 6

一种方法是在input-group-addon + some padding-left上使用背景图像并完全删除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值以进一步移动文字在右边。

Answer 7

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

使用图像而不是Bootstrap的glyphicon

8 个答案:

覆盖

自定义范围

图像

关于其余的