Wordpress icons configured displayed through radio buttons not working - html

Question

Can anybody help me get to the bottom of this?
I have icons for several post types that will be appearing across the screen, the whole thing is supposed to look like this on the page if I can get the icons to show up:
The farthest I have gotten is having every thing BUT the icons on display, here's why:
This is what puts the icons on the page. It's a custom field with some radio buttons for names and the values coordinate to class names in the HTML tags for the icons.
<div class="section-header">
<!-- If user uploaded an image -->
<?php if( !empty($features_section_image) ) : ?>
<img src="<?php echo $features_section_image['url']; ?>" alt="<?php echo $features_section_image['alt']; ?>">
<?php endif; ?>
<h2><?php echo $features_section_title; ?></h2>
<!-- If user added body text -->
<?php if( !empty($features_section_body) ) : ?>
<p class="lead"><?php echo $features_section_body; ?></p>
<?php endif; ?>
</div><!-- section-header -->
<div class="row">
<?php $loop = new WP_Query( array( 'post_type' => 'course_feature', 'orderby' => 'post_id', 'order' => 'ASC' ) ); ?>
<?php while( $loop->have_posts() ) : $loop->the_post(); ?>
<div class="col-sm-2">
<i class="<?php the_field('course_feature_icon'); ?>"></i>
<h4><?php the_title(); ?></h4>
</div><!-- end col -->
<?php endwhile; wp_reset_query(); ?>
</div><!-- row -->
</div><!-- container -->
</section><!-- course-features -->
The html classes are then taken by the CSS file and specified.
/* === CUSTOM ICON SPRITES === */
i.ci {
display: inline-block;
height: 40px;
width: 40px;
background: url('/wp-content/themes/Bootstrap2WordPress/bootstrap2wordpress/assets/img/icon-sprite.png') no-repeat;
}
.ci.ci-computer { background-position: 0 0; }
.ci.ci-watch { background-position: -40px 0; }
.ci.ci-calendar { background-position: -80px 0; }
.ci.ci-community { background-position: -120px 0; }
.ci.ci-instructor { background-position: -160px 0; }
.ci.ci-device { background-position: -200px 0; }
The background for the icon's class assigns the background image url to all the icons, this is because the background is a sprite sheet and the CSS for the individual CSS classes crop all the other sprites out of the sprite sheet. It's a ridiculously complicated way of doing it, I know, but I've got to do it this way.
So, I try it out and I get this.
What do I do?

Answer 1

Use background-image:url(); instead of just background:;
update: It is most likely the lack of url() and not the fact that you used background versus background-image