我正在使用 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; }
绘制边框时的实际输出在 FF 和 safari 中显示奇怪的输出
我从其他线程使用了这一行,但它不起作用。
文本渲染:优化易读性;
我该如何解决?
最佳答案
请运行下面的代码片段,
.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/