代码之家 › 专栏 › 技术社区 › en Peris

以字体显示标题-超棒的图标[关闭]

font-awesome html5 css html

-4

en Peris · 技术社区 · 6 年前

.title {
  color: green;
  text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="title"><i class="fa fa-exchange fa-2xfa fa-exchange fa-2x" aria-hidden="true"></i></div>

2 回复 | 直到 6 年前

1

2

Paulie_D 6 年前

可能在 :after 伪元素

attr() @ MDN

.fa {
  position: relative;
}

.fa:hover::after {
  content: attr(data-title);
  padding-left: .25em;
  position: absolute;
  bottom: 0;
  margin-bottom: -1em;
  left: 50%;
  transform: translateX(-50%);
  font-size: .5em;
  color: red;
}

div {
  color: green;
  text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <i class="fa fa-exchange fa-2x" aria-hidden="true" data-title="Exchange"></i></div>

2

-1

Richard Parnaby-King 6 年前

如果没有更多信息,您可以使用本机 title i :

<i class="..." title="My title here"></i>

当您将鼠标悬停在属性上时 标题

这就是你想要的效果吗?

div {
 color: green;
 text-align: center;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div><i class="fa fa-exchange fa-2xfa fa-exchange fa-2x" aria-hidden="true" title="My title"></i></div>