How to add a twitter-bootstrap icon as a CSS background-image?


Tags: css,twitter-bootstrap

Problem :

I have a css for hovering over tables to highlight the current row.

.cb_table-hover tbody tr:hover td,
.cb_table-hover tbody tr:hover th {
  background-color: #cfcfcf;

}

Additionally I could like to add another line to the same CSS to show a twitter bootstrap icon within the background of the hovered table row.

<i class="icon-search"></i>

At first I was thinking to utilise a background-image:url('??'); but the icon can't be defined like that.

Any idea if that possible? Thanks



Solution :

Sure ! You cann't set background image with a image sprite

But you can put the icon inside td/th tag and use "display" to show/hide the icon:

.cb_table-hover tbody tr td .icon-search,
.cb_table-hover tbody tr th .icon-search{
    display: none;
}

.cb_table-hover tbody tr td:hover .icon-search,
.cb_table-hover tbody tr th:hover .icon-search{
    display: inline-block;
}

    CSS Howto..

    How to implement CSS file style on selected div

    How to display a number (generated dynamically) into a square using CSS

    How to make the content of a span wrap onto the next line in an embedded

    Show specific comment in LESS file when compiled to CSS while keeping all other comments hidden

    how to show JS alert on open of each tab of the slider?

    How to accurately position divs with css

    how to dynamically change the property of css using jquery

    How can I position a child element behind its parent in IE7 and earlier

    How should I set this caption over my image using CSS?

    How can I have a transparent overlay and center with flex box?

    how to align right hand side image on top of text on mobile screen

    How to make pop up div locked to the page coordinates in jQuery

    How can I add image to facebook login button?

    Taking var with JS prompt - how can I make it through HTML form?

    How to create tooltip with one element in CSS

    How to place an HTML element over another using CSS

    jquery: how to determine if a style is set via css class or hardcoded by style attribute? [duplicate]

    How to display clicked on/off SVG icon from admin panel page and display result on a different page

    Calculating percentages for 10 or more images in a CSS3 slideshow

    How to use css style in php

    How to let the users style a web component with their own CSS?

    How do I lay out my content divs in a similar manner to Facebook Timeline?

    how to not inherit? or how to reset inherited width to the value before? (css)

    showing
    inside :before element

    How to align an image inside a DIV without adding new classes using CSS

    How to slide these divs continuously in loop

    Is it possible to compress LESS CSS files with htaccess? (and how to?)

    how to create the scrolling Menu in css?

    How to use “Wedding text ” in Css font family?

    How to change CSS color values in real-time off a javascript slider?