相关疑难解决方法(0)

我有一些看起来像这样的CSS:

#content h2 {
   background: url(../images/tContent.jpg) no-repeat 0 6px;
}

我想用Font Awesome中的图标替换图像.

我不认为无论如何使用CSS中的图标作为背景图像.这可以假设在我的CSS之前加载Font Awesome样式表/字体吗？

我使用bootstrap并尝试在文本输入元素中添加位置glyphicon标记

我尝试将glypicon类添加到输入区域,如下所示:

<input type="text" class="form-control glyphicon glyphicon-map-marker" >

我在W3Schools上使用了botostrap glyphicons的示例,该示例包括一个<span>元素内部的glyphicon标记,而不是在`元素内部,所以我相信我的问题所在的os.

IM尝试实现以下外观:

我从中获取图像的示例网站使用位置标记作为其css中的背景图像...

background-image: url(data:image/png;base64);

关于如何解决这个问题的任何建议,非常感谢.

我正在尝试使用fontawesome中的搜索图标而不是background-image使用转换来扩展输入区域的搜索栏中的搜索图标.单击此图标,该区域应该打开.

我试过了

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<input type="text" name="eingabe" placeholder="Suche">
<i class="fa fa-search" aria-hidden="true"></i>
</input>

但是然后符号在输入旁边,我无法点击它来使用我的过渡来擦除输入的宽度.

@Saurav几乎解决了我的问题,但我无法点击图标.

.search-bar {
  position: relative;
}

.search-bar .icon {
  position: absolute;
  top: 47%;
  left: 10px;
  transform: translateY(-50%);
}

.search-bar .input-text {
  width: 0px;
  border: 0px;
  background-color: #fff;
  height: 20px;
  padding: 8px 8px 8px 35px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
.search-bar .input-text:focus {
  width: 80%;
  background-color: #ccc;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-bar">
  <i …