在css文件中用fontawesome caret替换caret png

Question

我想用我使用FontAwesome字符的字符串替换菜单中的背景图像。这是一个现成的菜单，Joomla的一个模块。

看起来像这样：

这是CSS：

.responsiveMenuTheme5m.isMobile > li.deeper > span {
    background-image: url("../images/downArrow.png") !important;
    background-position: right 57px !important;
    background-repeat: no-repeat !important;
}

因此菜单编码器​​提供了一个名为downArrow.png的图像。这基本上是一个插入符号。我想用FontAwesome <span class="fa fa-caret-down"> </span>替换它。我有一个Twitter Bootstrap 3模板，我已经安装了FontAwesome，所以我认为这应该是一种可能性，即使没有修改菜单代码，但只能使用css。

任何人都可以帮我吗？

Answer 1

试试这个

.responsiveMenuTheme5m.isMobile > li.deeper > span{
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.responsiveMenuTheme5m.isMobile > li.deeper > span:before {
  content: "\f0d7";
}

Answer 2

您应该通过更改span元素的CSS来实现此目的。如果一切正常并且通过添加正确导入字体真棒：

.responsiveMenuTheme5m.isMobile > li.deeper > span:before { content: "\f0d7"; }

您的字体将会出现。

您可以查看此代码http://fontawesome.io/icon/caret-down/

Answer 3

你也可以尝试这个：

.responsiveMenuTheme5m.isMobile > li.deeper > span {
    background-position: right 57px !important;
    background-repeat: no-repeat !important;
}

使用以下代码替换插入符：

<i class="fa fa-caret-down"></i>

您可能必须使用＆lt; span＆gt;作为一种选择，如下：

<span class="fa fa-caret-down"></span>

您可能需要通过更改背景位置中的值来播放左插入符号距离。