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

Posted 2023-03-06

技术标签:

【中文标题】使用图像而不是 Bootstrap 的字形图标【英文标题】：Use an image instead of a Bootstrap's glyphicon 【发布时间】：2016-10-29 05:15:43 【问题描述】：

我想在 input-group 中使用自定义图像，而不是 Bootstrap 字形图标没有底部填充（我的图像触摸按钮的底部），正如您在这张图片中看到的那样：

其实我用的是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>

我的问题是我无法在搜索栏中用我的图片替换 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的图片：

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

谢谢！ :)

【问题讨论】：

您不想对 html 进行任何更改？您可以根据需要更改 HTML，它应该像我的图片一样呈现，并且具有响应性（在小屏幕上呈现良好）:-) 【参考方案1】：

您必须隐藏默认字形图标，然后使用自定义图像。试试以下几行：

.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's answer。【参考方案2】：

您可以在.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

【讨论】：

暂时是最好的答案。谢谢！【参考方案3】：

您应该看看 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

自定义跨度

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

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

Demo 2

图片

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

参考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!

【讨论】：

您好，感谢您的（完整）回答！我喜欢阅读你提到的不同想法。我喜欢你的目的的第二种方式，但是在small screen it rendered bad :-(。不用担心它不需要发布，这个搜索栏只需更新AngularJS ng-model！PS：你的解决方案#1 的 URL 给出了 404。跨度> 现在更新了 3 个演示，所以第一个链接有效，关于响应式的 2 行（min-width 和 overflow: hidden）现在到处都声明了。很高兴它有所帮助。 Mistalis，你解决了你的问题吗？你最后选择了哪种方式？您提出了广泛的解决方案，因此我为您提供了赏金。您的 #2 解决方案确实渲染得很好，但 tmg 的解决方案似乎更简单（更少的代码，更可重用）并且在这种特定情况下更符合我想要的！ :-)【参考方案4】：

您可以覆盖.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's有什么好处？ :-) Tmg 的解决方案在这种情况下当然是最好的。我只是添加我的解决方案，以防您不能或不想更改您的 HTML。但是，如果可以更改您的 HTML 结构，那么其他解决方案是最适合您的。【参考方案5】：

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

所以，把它添加到你的 html 中：

  <span class="input-group-addon">
    <img  src="http://i.stack.imgur.com/vr0uy.png" >
    <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

【讨论】：

【参考方案6】：

一种方法是在 input-group-addon 上使用背景图像 + 一些 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 值以将文本进一步向右移动。

【讨论】：

感谢您的回答，但正如我在问题中所说，我的主要目标之一是 without padding bottom (my image touch the bottom of the button), as you can see on this picture :-) 似乎 your code 不符合此条件实际上没有填充。就像我说的：你只需要调整背景大小（例如“包含”）。我编辑了答案以向您展示我的意思。【参考方案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>

【讨论】：

有趣。你觉得这段代码可以用来改变另一个Bootstrap的glyyhicon，还是太具体了？【参考方案8】：

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

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

【讨论】：

感谢您的回答。你对resize the search icon because the parent element has padding有什么建议？ :) 图标的高度应最大为 16 像素，根据您的引导。请看我回答的第一张截图：图片更大。使用您的代码，它非常小:) 实际上我不得不调整它的大小以适应可用空间。您可以尝试调整大小，但请确保将相同的高度扩展到输入框 @Mistalis 我找到了另一种方法来做到这一点，而不是使用 glyohicon 图标，我使用 CSS 伪元素，看看这个小提琴：jsfiddle.net/sanjeevks121/cppgw36p/2

以上是关于使用图像而不是 Bootstrap 的字形图标的主要内容，如果未能解决你的问题，请参考以下文章

在 CSS 中使用 Twitter Bootstrap 字形图标

如何在 bootstrap 3.0 中使用字形图标

Bootstrap 搜索字形图标高度

如何在twitter bootstrap中使用只有字形图标的按钮

向 Bootstrap 3 添加额外的自定义字形图标

bootstrap 3中的垂直对齐字形图标