[英]Adding a font awesome icon to a css class
我有一个带有不同大小小部件的仪表板。 我需要创建一个在小部件周围添加边框的单个类,并在现有内容顶部的小部件右上角添加一个很棒的字体图标。
我如何用一个 css 类做到这一点?
我不是 100% 了解您的需求,但我试图做出一些接近您的需求的东西。
HTML:
<span class="icon fa-id-card-o"></span>
CSS:
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: absolute;
right: 0;
color: red;
}
.icon:before {
content: "\f2c3";
}
.icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; right: 0; color: red; } .icon:before { content: "\\f2c3"; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <span class="icon fa-id-card-o"></span>
另一个带有固定 div 的示例,例如小部件的
HTML:
<div class="box">
<span class="icon fa-id-card-o"></span>
</div>
CSS:
.icon {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: red;
float: right;
}
.icon:before {
content: "\f2c3";
}
.element.style {
}
.box {
background: green;
margin: 100px;
display: block;
width: 70%;
height: 300px;
}
.icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: red; float: right; } .icon:before { content: "\\f2c3"; } .element.style { } .box { background: green; margin: 100px; display: block; width: 70%; height: 300px; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="box"> <span class="icon fa-id-card-o"></span> </div>
嗯,我明白这样的事情......
HTML
<div class="box">
<div class="box-icon"></div>
</div>
CSS
.box {
box-shadow: 0px 0px 10px #000;
height: 5em;
width: 5em;
}
.box-icon {
position: relative;
}
.box-icon:before {
content: "\f2da";
display: inline-block;
font-family: FontAwesome;
position: absolute;
right: -1.5em;
}
我希望能帮到你。
当直接在按钮内或任何你想要的地方使用字体真棒icons
你可以像下面一样使用
<i class="fab fa-rebel"></i>
按钮的示例如下
<button class="button">
<i class="fab fa-rebel"></i>
</button>
但是,当使用额外的css
时,您可以使用span
。 下面的示例有一个额外的css
' your-css
'。
<button class="button">
<span class="your-css fab fa-rebel"></span>
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.