Font Awesome 图标在链接内有文本修饰问题
Font Awesome icons have text-decoration issues inside links
当我在文本前面放置一个图标-link(link 内的图标)时,我遇到了一个关于 font-awesome 的 "ugly" 问题。通过悬停图标,图标本身不会加下划线,但不知何故文本和图标之间的 space。
link 中的文本修饰 css 规则(悬停时下划线)与来自这个奇怪出现的图标的规则发生冲突 space.
如何去掉space中的这条下划线,最后就没有装饰了?
(尽可能不向 link 元素添加 class 也不使用 JS)
这是一个可能对您有所帮助的代码片段。
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
Fiddle: https://jsfiddle.net/kg6zdxu5/
如果我没理解错的话,您想删除不必要的下划线并在图标下添加下划线。
只需删除 a:hover
并将其替换为 i:hover
,就可以解决问题。
a {
text-decoration: none;
}
.fa-wrench:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
只需删除 a:hover
并添加 .fa-wrench:hover
。
h1 {
font-size:2.5em;
}
a {
text-decoration: none;
}
.fa-wrench:hover{
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Test Title
</h1>
显然,如果您将 <a>
标签和 <i>
标签写在一行中,它们将不会呈现 space。避免在这两个元素之间换行可以解决您的问题。
代码段:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<h1>
<a href="#"><i class="fa fa-wrench"></i></a>
Text of Title
</h1>
编辑:
通常最好不要更改元素的默认显示值,但在这里您可以在 <a>
标签中使用 display: inline-block;
来删除 space。
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 > a {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
不一定与问题相关,但我不久前停止使用图标字体并采用了 SVG 图标,在我看来,它更好。
Here's a good article on making the switch, and here's 另一个关于如何使用它们的信息。
演示:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 > a {
display: inline-block;
color: purple;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-wrench {
width: 0.939453125em;
}
<h1>
<a href="#">
<svg class="icon icon-wrench">
<use xlink:href="#icon-wrench"></use>
</svg>
</a>
Text of Title
</h1>
<svg style="display:none;">
<symbol id="icon-wrench" viewBox="0 0 30 32">
<title>wrench</title>
<path class="path1" d="M6.857 26.286q0-0.464-0.339-0.804t-0.804-0.339-0.804 0.339-0.339 0.804 0.339 0.804 0.804 0.339 0.804-0.339 0.339-0.804zM18.357 18.786l-12.179 12.179q-0.661 0.661-1.607 0.661-0.929 0-1.625-0.661l-1.893-1.929q-0.679-0.643-0.679-1.607 0-0.946 0.679-1.625l12.161-12.161q0.696 1.75 2.045 3.098t3.098 2.045zM29.679 11.018q0 0.696-0.411 1.893-0.839 2.393-2.938 3.884t-4.616 1.491q-3.304 0-5.652-2.348t-2.348-5.652 2.348-5.652 5.652-2.348q1.036 0 2.17 0.295t1.92 0.83q0.286 0.196 0.286 0.5t-0.286 0.5l-5.232 3.018v4l3.446 1.911q0.089-0.054 1.411-0.866t2.42-1.446 1.259-0.634q0.268 0 0.42 0.179t0.152 0.446z"></path>
</symbol>
</svg>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
通常当你有多个字体很棒的图标时会弹出这个问题,例如,下面我们有 2 个图标:
<span>
<a href="https://github.com/" class="me-4 text-reset text-decoration-none">
<i class="fab fa-github px-1"></i>
</a>
</span>
<span>
<a href="https://github.com/" class="me-4 text-reset text-decoration-none">
<i class="fab fa-github px-1"></i>
</a>
</span>
关键class是text-decoration-none,您在样式sheet中定义如下:
.text-decoration-none:hover{
text-decoration: none;
}
这样,在悬停时,您的超赞字体图标将不会显示下划线。它会覆盖您的 a:hover。请记住,您需要 <span></span>
个标签才能实现此...
所以你需要一个新的 :hover
class 加上 <span>
标签。
当我在文本前面放置一个图标-link(link 内的图标)时,我遇到了一个关于 font-awesome 的 "ugly" 问题。通过悬停图标,图标本身不会加下划线,但不知何故文本和图标之间的 space。 link 中的文本修饰 css 规则(悬停时下划线)与来自这个奇怪出现的图标的规则发生冲突 space.
如何去掉space中的这条下划线,最后就没有装饰了? (尽可能不向 link 元素添加 class 也不使用 JS)
这是一个可能对您有所帮助的代码片段。
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
Fiddle: https://jsfiddle.net/kg6zdxu5/
如果我没理解错的话,您想删除不必要的下划线并在图标下添加下划线。
只需删除 a:hover
并将其替换为 i:hover
,就可以解决问题。
a {
text-decoration: none;
}
.fa-wrench:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
只需删除 a:hover
并添加 .fa-wrench:hover
。
h1 {
font-size:2.5em;
}
a {
text-decoration: none;
}
.fa-wrench:hover{
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Test Title
</h1>
显然,如果您将 <a>
标签和 <i>
标签写在一行中,它们将不会呈现 space。避免在这两个元素之间换行可以解决您的问题。
代码段:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<h1>
<a href="#"><i class="fa fa-wrench"></i></a>
Text of Title
</h1>
编辑:
通常最好不要更改元素的默认显示值,但在这里您可以在 <a>
标签中使用 display: inline-block;
来删除 space。
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 > a {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
不一定与问题相关,但我不久前停止使用图标字体并采用了 SVG 图标,在我看来,它更好。
Here's a good article on making the switch, and here's 另一个关于如何使用它们的信息。
演示:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 > a {
display: inline-block;
color: purple;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
.icon-wrench {
width: 0.939453125em;
}
<h1>
<a href="#">
<svg class="icon icon-wrench">
<use xlink:href="#icon-wrench"></use>
</svg>
</a>
Text of Title
</h1>
<svg style="display:none;">
<symbol id="icon-wrench" viewBox="0 0 30 32">
<title>wrench</title>
<path class="path1" d="M6.857 26.286q0-0.464-0.339-0.804t-0.804-0.339-0.804 0.339-0.339 0.804 0.339 0.804 0.804 0.339 0.804-0.339 0.339-0.804zM18.357 18.786l-12.179 12.179q-0.661 0.661-1.607 0.661-0.929 0-1.625-0.661l-1.893-1.929q-0.679-0.643-0.679-1.607 0-0.946 0.679-1.625l12.161-12.161q0.696 1.75 2.045 3.098t3.098 2.045zM29.679 11.018q0 0.696-0.411 1.893-0.839 2.393-2.938 3.884t-4.616 1.491q-3.304 0-5.652-2.348t-2.348-5.652 2.348-5.652 5.652-2.348q1.036 0 2.17 0.295t1.92 0.83q0.286 0.196 0.286 0.5t-0.286 0.5l-5.232 3.018v4l3.446 1.911q0.089-0.054 1.411-0.866t2.42-1.446 1.259-0.634q0.268 0 0.42 0.179t0.152 0.446z"></path>
</symbol>
</svg>
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<h1>
<a href="#">
<i class="fa fa-wrench"></i>
</a>
Text of Title
</h1>
通常当你有多个字体很棒的图标时会弹出这个问题,例如,下面我们有 2 个图标:
<span>
<a href="https://github.com/" class="me-4 text-reset text-decoration-none">
<i class="fab fa-github px-1"></i>
</a>
</span>
<span>
<a href="https://github.com/" class="me-4 text-reset text-decoration-none">
<i class="fab fa-github px-1"></i>
</a>
</span>
关键class是text-decoration-none,您在样式sheet中定义如下:
.text-decoration-none:hover{
text-decoration: none;
}
这样,在悬停时,您的超赞字体图标将不会显示下划线。它会覆盖您的 a:hover。请记住,您需要 <span></span>
个标签才能实现此...
所以你需要一个新的 :hover
class 加上 <span>
标签。