css - 素材 css 按钮切断图标

Question

我在 angularjs 中使用了 materialize css...我的按钮图标被截断了，我尝试了 materialize 图标和 font-awesome 图标，结果相同。

screenshot of buttons with icons moved downward and cut off

<nav class="red darken-4">
    <div class="nav-wrapper">
        <a href ng-click="navToCPQ()"><img class="ml-3" src="../../assets/content/images/logo.png" /></a>
        <div class="right pr-3">
            <a href class="waves-effect waves-light btn red darken-2"><i class="fas fa-cog"></i></a>
            <a href class="waves-effect waves-light btn red darken-2"><i class="fas fa-user-circle"></i></a>
        </div>
        <ul class="pr-3 right hide-on-med-and-down">
            <li><a href ng-click="navToCPQ()">CPQ</a></li>
            <li><a href ng-click="navToPC()">Process Control</a></li>
        </ul>
    </div>
</nav>

Answer 1

问题出在您的 CSS 中。在没有看到您的实际代码的情况下，我们只能猜测确切的问题是什么以及理想的解决方案是什么。

但是，由于图像被截断了，您可以设置容器的高度，这样它会更大并且有放置图像的位置。您还可以检查 image 标签的大小和 image 文件的大小并进行比较。此外，您可以使用 background-position-y 属性向上移动 image，或者使用 margin-top CSS 属性向上移动 anchor 。