为什么我的<i></i>标签里面不能显示小图标？

Question

          <form class="header_search_wrapper">

            <span>

                <a>商品</a>

                 <i class="ico1"></i>

            </span>

            <span class="header_search_sub">

                <a>商品</a>

                <a>店铺</a>

            </span>

            <span>

                <input type="text" class="search_input" placeholder="请输入关键词、学校名等..." required>

                <input type="submit" value="搜索">

            </span>

          </form>

    </div>

.header_search_wrapper {

float: right;

height: 45px;

width: 425px;

line-height: 45px;

margin: 13px;

border: 2px solid #7FC7A0;

background-color: #474645;

background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);

background-image: -moz-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);

background-image: -o-linear-gradient(270deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);

background-image: linear-gradient(180deg,rgba(255,255,255,1.00) 0%,rgba(97,96,95,1.00) 20.73%,rgba(71,70,69,1.00) 100%);

}

.header_search_sub {display:none;}

.search_input {height:30px; width:300px;}

.header_login {float:right; line-height:70px; list-style:none;}

.header_login li {float:left; width:75px; color:#747878;}

/* <i></i>标签样式*/

.ico1 {background-image: url(../images/i_1.jpg);width:9px; height:20px;}

Answer 1

给display:inline-block属性变成块级元素宽高才生效

Answer 2

i标签是行内元素，定义宽高无效。 应把他转换为 块元素或行内块元素

Answer 3

好的，谢谢，重新看一下视频，解决了，谢谢了

Answer 4

好的，谢谢，重新看一下视频，解决了，谢谢了

Answer 5

i标签是行内元素块元素才可以设置background-image