[英]Adding a font awesome icon to a css class
I have a dashboard with different sized widgets.我有一个带有不同大小小部件的仪表板。 I need to make a single class that adds a border around the widget, and also adds a font awesome icon to the top right of the widget on top of the existing content.我需要创建一个在小部件周围添加边框的单个类,并在现有内容顶部的小部件右上角添加一个很棒的字体图标。
How i do this with one css class?我如何用一个 css 类做到这一点?
I am not 100% understand your need but i was try to make something make close of your need.我不是 100% 了解您的需求,但我试图做出一些接近您的需求的东西。
HTML: HTML:
<span class="icon fa-id-card-o"></span>
CSS: 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>
ANOTHER EXAMPLE with a fixed div like a widget's另一个带有固定 div 的示例,例如小部件的
HTML: HTML:
<div class="box">
<span class="icon fa-id-card-o"></span>
</div>
CSS: 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>
Well, i'am understand something like this...嗯,我明白这样的事情......
HTML HTML
<div class="box">
<div class="box-icon"></div>
</div>
CSS 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;
}
I hope can ia help you.我希望能帮到你。
When using font awesome icons
directly inside a button or wherever you want you can use like below当直接在按钮内或任何你想要的地方使用字体真棒icons
你可以像下面一样使用
<i class="fab fa-rebel"></i>
an example for a button is below按钮的示例如下
<button class="button">
<i class="fab fa-rebel"></i>
</button>
but, when use an additional css
with this, you can use span
.但是,当使用额外的css
时,您可以使用span
。 the example below have an additional css
' your-css
'.下面的示例有一个额外的css
' your-css
'。
<button class="button">
<span class="your-css fab fa-rebel"></span>
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.