Question

我有一个带有fontawessome图标的链接：

<a class="fa fa-some-icon" href="#">Link1</a>

我想在图标和文本之间插入填充。我试过这个：

 font-size: 20px; padding: 10px 0;

但没有运气。

Answer 1

将margin-right添加到:before元素的a伪。

＆＃13;

a::before {
    content: "";
    margin-right: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" class="fa fa-user">Link1</a>

＆＃13;

或者您可以在width中添加:before，如下所示：

＆＃13;

a::before {
  content: "";
  display:inline-block;
  width:20px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" class="fa fa-user">Link1</a>

＆＃13;

Answer 2

向margin-right伪元素的样式添加一些右缩进（padding-right或:before），您将在其中添加font-awesome类。例如

.fa:before {
  margin-right: 10px;
}

＆＃13;

.custom-link:before {
  margin-right: 10px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<a class="fa fa-bank custom-link" href="#">Link1</a>

＆＃13;

Answer 3

你可以给你一些css类，并使用:: before选择器，如下所示

HTML

<a class="some_class fa fa-amazon" href="#">Link1</a>

CSS

.some_class::before {
  padding-right:15px;
 }

小提琴：Fiddle

Answer 4

使用可以管理的psudo选择器之前或之后的填充。 HTML

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="#" class="fa fa-address-book">Address Book</a><br/>
<a href="#" class="fa fa-address-card">Address Card</a>
<style>
      a::before {
      content: "";
      padding-right: 10px;
 }

Fiddly：http://fiddly.org/9b610

Answer 5

::在插入元素之前的内容之前没有边距或填充。

你必须这样做：

<a href="#"><span class="fa fa-some-icon" style="padding-right:10px;"></span>Link1</a>

在字体awessome中的链接和图标之间插入填充

5 个答案: