html - 导航栏图标位置问题

Question

如何设置导航栏文本旁边的图标？

代码:

<ul>
    <li><a href="#" id="other-color" class="ui-btn ui-shadow ui-btn-icon-left ui-custom-icon ui-arrow ui-nodisc-icon">Set Filter</a></li>
    <li><a href="#" id="other-color" class="ui-btn ui-shadow ui-btn-icon-right ui-custom-icon ui-location ui-nodisc-icon">Add Page</a></
</ul>

CSS:

.ui-arrow:after {
    content: '';
    background-image: url(icons/filled-filter-32.png);
    background-size: 15px 15px;
}

.ui-location:after {
    content: '';
    background-image: url(img/plus-32.png);
    background-size: 15px 20px;
}

我需要这样，文本前后不需要空格。

Answer 1

在前面添加图片:

a.ui-arrow{ 
   display: inline-block;
   padding-left: 25px;
}

在之后添加图像:

a.ui-location{ 
   display: inline-block;
   padding-right: 25px;
}

根据您的背景图片管理填充