字体很棒,相同的图标不同宽度
Font awesome, same icon with different width
我对 Font Awesome 图标有点问题。
我有 2 个相同版本的网站(用于开发和测试),虽然具有相同的 CSS 样式,但图标显示不同。
我用这个图标描述了这个问题:
.btnFilter {
color: #666666;
padding-top: 4px;
font-size: 18px;
text-align: center;
}
.circle {
border: solid #999 1px;
border-radius: 13px;
box-sizing: border-box;
width: 26px;
height: 26px;
text-align: center;
font-size: 18px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-times circle btnFilter"></i>
这个 CSS 和 HTML 标记被放置在开发和测试版本上,chrome 开发工具显示相同的样式,并且悬停 font-awesome 图标:在伪元素的大小给出结果之前如上图。
我认为这与字体大小有关。我认为这是因为 font-awesome 声明了
font: normal normal normal 14px/1 FontAwesome;
因此请删除字体大小或使用 em 调整您的字体大小,它应该会按预期工作
如果您将 !important 添加到您的字体大小,您将看到您在您的网站之一上看到的奇怪结果。
.btnFilter {
color: #666666;
padding-top: 4px;
font-size: 18px !important;
text-align: center;
}
.circle {
border: solid #999 1px;
border-radius: 13px;
box-sizing: border-box;
width: 26px;
height: 26px;
text-align: center;
font-size: 18px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-times circle btnFilter"></i>
或者你可以这样做
.circle{
width:18px;
height:18px;
padding: 3px;
background-color:white;
border-radius:100%;
line-height:18px;
text-align:center;
vertical-align:middle;
display:inline-block;
border: solid #999 1px;
}
.btnFilter {
line-height: inherit;
font-size: 18px;
color: #666666;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="circle">
<i class="fa fa-times btnFilter"></i>
</div>
我认为在这里使用 em
而不是 px
值会更好...然后一切都会根据字体大小进行调整。
关于您的具体问题,line-height
/font-size
中的 font-awesome 与您的特定样式之间存在冲突。
也可能不需要顶部填充。
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.btnFilter {
color: #666666;
font-size: 160px !important;
/* for demo only */
line-height: 1em;
text-align: center;
}
.fa::before {
line-height: inherit;
}
.circle {
border: solid #999 1px;
border-radius: 50%;
width: 1.1em;
height: 1.1em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-times circle btnFilter"></i>
我对 Font Awesome 图标有点问题。
我有 2 个相同版本的网站(用于开发和测试),虽然具有相同的 CSS 样式,但图标显示不同。
我用这个图标描述了这个问题:
.btnFilter {
color: #666666;
padding-top: 4px;
font-size: 18px;
text-align: center;
}
.circle {
border: solid #999 1px;
border-radius: 13px;
box-sizing: border-box;
width: 26px;
height: 26px;
text-align: center;
font-size: 18px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-times circle btnFilter"></i>
这个 CSS 和 HTML 标记被放置在开发和测试版本上,chrome 开发工具显示相同的样式,并且悬停 font-awesome 图标:在伪元素的大小给出结果之前如上图。
我认为这与字体大小有关。我认为这是因为 font-awesome 声明了
font: normal normal normal 14px/1 FontAwesome;
因此请删除字体大小或使用 em 调整您的字体大小,它应该会按预期工作
如果您将 !important 添加到您的字体大小,您将看到您在您的网站之一上看到的奇怪结果。
.btnFilter {
color: #666666;
padding-top: 4px;
font-size: 18px !important;
text-align: center;
}
.circle {
border: solid #999 1px;
border-radius: 13px;
box-sizing: border-box;
width: 26px;
height: 26px;
text-align: center;
font-size: 18px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-times circle btnFilter"></i>
或者你可以这样做
.circle{
width:18px;
height:18px;
padding: 3px;
background-color:white;
border-radius:100%;
line-height:18px;
text-align:center;
vertical-align:middle;
display:inline-block;
border: solid #999 1px;
}
.btnFilter {
line-height: inherit;
font-size: 18px;
color: #666666;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="circle">
<i class="fa fa-times btnFilter"></i>
</div>
我认为在这里使用 em
而不是 px
值会更好...然后一切都会根据字体大小进行调整。
关于您的具体问题,line-height
/font-size
中的 font-awesome 与您的特定样式之间存在冲突。
也可能不需要顶部填充。
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.btnFilter {
color: #666666;
font-size: 160px !important;
/* for demo only */
line-height: 1em;
text-align: center;
}
.fa::before {
line-height: inherit;
}
.circle {
border: solid #999 1px;
border-radius: 50%;
width: 1.1em;
height: 1.1em;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-times circle btnFilter"></i>