html - Font Awesome 图标之间的间距

标签 html css

<分区>

我想消除这个 jsfiddle 中 fa 图标(带背景)之间烦人的间距.

我尝试了边距和字间距,但没有用。

图标容器的 CSS:

.home-header-sm {
  text-align: right;
  margin-right: 20px;
  font-size: 20px;
  word-spacing: 0px;
}

.home-header-sm a,
.home-header-sm a:visited,
.home-header-sm a:hover,
.home-header-sm a:active {
  color: #FFFFFF;
}

.fa {
  text-align: center;
  border-style: solid;
  background-color: #ffffff;
  color: #1D233D;
  width: 30px;
  padding-top: 3px;
  padding-bottom: 3px;
  margin: 0px 0px 0px 0px !important;
}

最佳答案

你有两个问题。

1) 你的图标周围有边框。删除它:

.fa { border: none; }

2) 其次,删除 html 中标签之间的空格。

关于html - Font Awesome 图标之间的间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36792821/

相关文章:

javascript - 如何使用 React 创建可运行的代码片段?

javascript - 如何在epub阅读器中实现 'page break'

html - 造型营业时间

jquery - 克隆表行并将 ID 递增 1

php - 仅在提交时使用 javascript 保存表单状态

Javascript 新窗口打开并打印 css 加载

javascript - 页面加载后 Spinner/Loader 不会停止

javascript - 如何为 Material 卡标题指定固定宽度?

jquery - SVG 图像元素在鼠标悬停时闪烁

javascript - CSS:制作水平滚动菜单