代码之家 › 专栏 › 技术社区 › bafix2203

是否在字体顶部添加图标?

twitter-bootstrap css

bafix2203 · 技术社区 · 6 年前

我已经创建了这样的东西,但在我的按钮中,我想要这样的东西- <i class="fa fa-clock-o"></i> 在右上方。 HTML:

 <button class="btn btn-default btn-sm " > <i  class="fa fa-arrow-down fa-lg" style="color:green"></i><span><i class="fa fa-clock-o"></i></span></button>

CSS:

.fa-stack[data-count]:after{
  position:absolute;
  right:0%;
  top:1%;
  content: attr(data-count);
  font-size:30%;
  padding:.6em;
  border-radius:999px;
  line-height:.75em;
  color: white;
  background:rgba(255,0,0,.85);
  text-align:center;
  min-width:2em;
  font-weight:bold;
}

这是我的代码: https://codepen.io/anon/pen/XqZENw 感谢您的提前!

1 回复 | 直到 6 年前

Fab 6 年前

刚刚设置好 position: relative 到按钮和 position: absolute 到中的图标。

像这样:

button {
  position: relative;
}

button i.fa.fa-clock-o {
  position: absolute;
  top: 0;
  right: 0;
}

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

2 年前

tym · 根据用户偏好显示字段

2 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前