时间戳

首页 > 解决方案 > 有没有办法编辑 fontawesome 图标的边缘或边框？

html - 有没有办法编辑 fontawesome 图标的边缘或边框？

问题描述

我目前是一名学习 HTML 和 CSS 的学生。我的任务是复制一个网页。但是，我很难让图标看起来像提供复制的模型中显示的那样。下图显示了模型的图标区域与我所拥有的相比应该是什么样子，以及在进行颜色或大小调整之前添加到 HTML 时原始图标的外观。

提供的模型的原始图标区域。

我离它有多近

调整大小和颜色之前的原始图标

我需要使边缘清晰，并且要删除图标上方和下方的白色区域。我尝试将边框半径、边距和填充设置为 0px 或 0%，但仍然没有任何效果。我也尝试使用文本阴影。

我的图标区域的 HTML 代码是

'<div class="icons">
        <i class="fab fa-twitter-square"></i>
        <i class="fab fa-facebook-square"></i>
        <i class="fab fa-dribbble-square"></i>
        <i class="fab fa-tumblr-square"></i>
        <i class="fas fa-rss-square"></i>
    </div>'

和 CSS

'i{
display: inline-flexbox;
font-size: 24px;
color: #3E5A99;
background-color: #E5EEFF;
margin-bottom: 50px;
}'

我正在寻求一些关于如何完成这项工作的建议，拜托。先感谢您。

标签： htmlcss

解决方案

简短的回答是否定的，如果不下载、编辑和重新上传单个 svg，就无法编辑 FontAwesome 网络字体图标。

我会使用这些图标的无背景版本，然后将它们分别放在一个div. 然后，您可以将 div border-radius、background-color等设置为您所需要的。

这个过程的几个指针：

用于display: grid;每个容器 div，这样您还可以将place-items: center;其 div 内的每个图标添加到超级中心。

推荐阅读