Question

有人可以帮助我深入浅出吗？我有几种帖子类型的图标，这些图标将在屏幕上显示，如果我可以显示图标，整个页面应该看起来像这样：我得到的最远的结果是让所有东西都显示了，但是这是为什么：这就是将图标放在页面上的原因。这是一个自定义字段，其中包含一些用于名称的单选按钮，并且值与图标的HTML标记中的类名称协调。

        <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 -->

然后html类由CSS文件获取并指定。

/* === 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; }

图标类的背景将背景图像url分配给所有图标，这是因为背景是一个Sprite表，而各个CSS类的CSS将从Sprite表中裁剪出所有其他Sprite。我知道这是一种非常复杂的方法，但是我必须这样做。因此，我尝试了一下，就明白了。我该怎么办？

Answer 1

使用background-image:url();而不是background:;

更新：很可能缺少url()，而不是您使用背景对比背景图像的事实

通过单选按钮显示的配置的Wordpress图标不起作用

1 个答案: