CODEWITHSUNDEEP
htmlcsswordpress
Nick White
Nick White

Reputation: 61

Wordpress icons configured displayed through radio buttons not working

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: enter image description here The farthest I have gotten is having every thing BUT the icons on display, here's why: enter image description here 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.enter image description here What do I do?

Upvotes: 3

Views: 71

Answers (1)

David Walz
David Walz

Reputation: 143

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

Upvotes: 1

Related Questions