html - 绘图边框问题 CSS Font Awesome 图标

标签 html css

我正在使用 css awesome 字体图标 ( https://fortawesome.github.io/Font-Awesome/ ),我正在尝试使用 css 规则在它们周围绘制圆形或方形边框。

<i class="fa fa-check-circle fa-5x fa-square"></i>

objective-c ss 规则是..

.fa-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em;  }
.fa-square {   color: #b0b0b0;  border-radius:50%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 1em; }

原来没有边框的check circle是这个样子的.. enter image description here

绘制边框时的实际输出在 FF 和 safari 中显示奇怪的输出 enter image description here

我从其他线程使用了这一行,但它不起作用。

文本渲染:优化易读性;

我该如何解决?

最佳答案

请运行下面的代码片段,

.border-circle {  color: #b0b0b0; border-radius: 50%;  border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em;  }
.border-square {   color: #b0b0b0;  border-radius:25%; border: 10px solid #b0b0b0; padding: 0.5em; float:left; margin-right: 0.2em; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-check-circle fa-3x border-circle"></i>
<i class="fa fa-check-circle fa-3x border-square"></i>
<i class="fa fa-check-square fa-3x border-circle"></i>
<i class="fa fa-check-square fa-3x border-square"></i>

关于html - 绘图边框问题 CSS Font Awesome 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32590673/

相关文章:

javascript - Angular(2 +) 检测 Angular 形式(响应式(Reactive))中的数据是否已更改

html - 如何使用 Node.JS 通过 XMPP 发送 HTML 格式的消息?

html - <p> 标签中单词之间的文本间距不一样

css - 当屏幕宽度小于一定尺寸时,我的导航栏从水平切换到垂直

javascript - 在 HTML 中使用拖放 jQuery 实现填空

html - 如何使用 HTML5 将视频和播放列表添加到页面?

javascript - 为什么此站点在注册点击事件时遇到问题?

javascript - 我正在尝试在我的 Canvas 中实现撤消选项

javascript 在屏幕上用动画显示图像

javascript - 将 TD 值复制到 TD 内动态创建的输入