css - 图标图像导航 CSS

Question

导航栏中的图标图像存在一些问题，我尝试将这些图标设置在每个标签旁边的正确位置。如果您发现 Web 标签与计算机监视器图标非常接近，我尝试更改填充顶部和底部(左侧和右侧除外)，但这种方式不起作用。

http://i58.tinypic.com/e5i7p4.jpg

<nav id="sideMenu" role="navigation">
<ul id="MainNav" class="nav-bar">
    <li><a class="icon" href="#web"><img src= "img/web.svg">Web</a></li>
    <li><a class="icon" href="#articles"><img src= "img/articles.svg">Articles</a></li>
    <li><a class="icon" href="#about"><img src= "img/about.svg">About</a></li>
    <li><a class="icon" href="#contact"><img src= "img/contact.svg">Contact</a></li>
</ul>
</nav>

.icon img {
    height: 30px;
    width: 30px;
    padding-left: -0.2rem;
    padding-right: 0.8rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

有人要吗？

Answer 1

尝试使用 margin 。填充用于文本。你可以试试这个 -

.icon img {
    height: 30px;
    width: 30px;
    margin: 3px 0px 0px -6px;
}