css - 用 css 文件中的 fontawesome 插入符号替换插入符号 png

标签 css twitter-bootstrap-3 png font-awesome

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

看起来像这样:

menu

这是 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。

谁能帮我做一下?

最佳答案

试试这个

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

关于css - 用 css 文件中的 fontawesome 插入符号替换插入符号 png,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37836894/

相关文章:

javascript - 如何使水平div滚动条像固定的CSS div一样 float

c# - 删除 Highcharts 图表上条形下方的类别文本

具有多个选择选项的选择列表中的 PHP 回显

javascript - 将文本嵌入 PNG

html - 如何从我的页面中删除一大片空白区域?

html - 具有不等图像大小的简单 CSS 网格

html - 仅将 Bootstrap 'Col' 应用于平板电脑大小的设备

ruby-on-rails - simple_form 与 bootstrap 3 的集成

python - Pydot 不能很好地处理换行符?

image-processing - PVRTC 压缩增加了 PNG 的文件大小