Twitter Bootstrap Question posted in

replace caret png by fontawesome caret in css file – Twitter bootstrap

I would like to replace the background image in my menu with a string that uses a FontAwesome character. It is a ready-made menu, a module in Joomla.

It looks like this:

menu

Here is the CSS: 

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

So the menu coder provided an image called downArrow.png. Which is basically a caret-down. I would like to replace this with FontAwesome <span class="fa fa-caret-down"> </span>. I’ve got a Twitter Bootstrap 3 template and I’ve got FontAwesome installed, so I thought this should be a possibility, even without tinkering with the menu code, but only with css.

Can anyone help me do it?

Tags:

3

Answers


  1. 0

    Try this 

    .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";
}
    Login or Signup to reply.
  2. 0

    You should be able this by changing css of span element. If everything is ok and font awesome is imported correctly by adding:

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

    your font will appear.

    You can check out this code http://fontawesome.io/icon/caret-down/

    Login or Signup to reply.
  3. 0

    You may also try this one:

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

    Replace the caret with the following code:

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

    You might have to use the <span> as an option, like so:

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

    You might have to play with the left caret distance by changing the values found in the background-position.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search