如何从Font Awesome的图标中设置图标的颜色,大小和阴影?
例如,Font Awesome的网站将以白色显示一些图标,以红色显示一些图标,但不会显示CSS
如何以这种方式设置样式...
如何从Font Awesome的图标中设置图标的颜色,大小和阴影?
例如,Font Awesome的网站将以白色显示一些图标,以红色显示一些图标,但不会显示CSS
如何以这种方式设置样式...
Answers:
鉴于它们只是字体,那么您应该能够将它们设置为字体样式:
#elementID {
color: #fff;
text-shadow: 1px 1px 1px #ccc;
font-size: 1.5em;
}
您也可以只添加内联样式:
<i class="icon-ok-sign" style="color:green"></i>
<i class="icon-warning-sign" style="color:red"></i>
class='icon-ok-sign my-red-class'
?还是class='icon-ok-sign-red'
?这使其可读性降低,并增加了无用的复杂度。
如果同时使用Bootstrap,则可以使用:
<i class="fa fa-check-circle-o fa-5x text-success" ></i>
除此以外:
<i class="fa fa-check-circle-o fa-5x" style="color:green"></i>
有一种非常简单的方法来更改“真棒字体”图标的颜色。
<!-- Font Awesome insert code -->
<script src="https://use.fontawesome.com/49b98aaeb5.js"></script>
<!-- End -->
<i class="fa fa-thumbs-up fa-5x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-4x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-3x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up fa-2x" aria-hidden="true" style="color:#00cc6a"></i>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:#00cc6a"></i>
您可以根据自己的喜好更改十六进制代码。注:文字颜色将改变图标的颜色,以及除非有一个style="color:#00cc6a"
的内i
标签。
For Size : fa-lg, fa-2x, fa-3x, fa-4x, fa-5x.
For Color : <i class="fa fa-link fa-lg" aria-hidden="true"style="color:indianred"></i>
For Shadow : .fa-linkedin-square{text-shadow: 3px 6px #272634;}
http://fortawesome.github.io/Font-Awesome/examples/
<i class="icon-thumbs-up icon-3x main-color"></i>
在这里,我在CSS中定义了一个全局样式,其中main-color是一个类,在我的情况下是浅蓝色。我发现在带有Font Awesome的图标上使用内联样式效果很好,特别是在您以语义方式命名颜色的情况下,例如,如果您想要单独的颜色,请使用nav-color,等等。
在他们网站上的这个示例中,以及我在示例中的编写方式,最新版本的Font Awesome稍稍更改了调整大小的语法,之前它是:
icon-xxlarge
现在我必须在哪里使用:
icon-3x
当然,这完全取决于您在环境中安装的哪个版本的Font Awesome。希望这可以帮助。
只需在CSS文件中定义一个类并将其级联为html文件即可,例如
<i class="fa fa-plus fa-lg green"></i>
现在在css中写下
.green{ color:green}
请参考链接 http://www.w3schools.com/icons/fontawesome_icons_intro.asp
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
(此答案基于该答案)
(对于书签图标,例如:)
inyour.css文件:
.icon-bookmark.icon-white {
color: white;
}
inyour.html文件:
<div class="icon-bookmark icon-white"></div>
用于调整图标
我们的Web字体+ CSS和SVG + JS框架都包含一些基本控件,可用于在页面UI的上下文中调整图标的大小。
你可以用像
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>
https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons
动态更改.fa-xxx图标的css属性:
<li class="nws">
<a href="#NewsModal" class="urgent" title="' + title + '" onclick=""><span class="label label-icon label-danger"><i class="fa fa-bolt"></i></span>'
</a>
</li>
<script>
$(document).ready(function(){
$('li.nws').on("focusin", function(){
$('.fa-bolt').addClass('lightning');
});
});
</script>
<style>
.lightning{ /*do something cool like shutter*/}
</style>
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
我不建议您使用内置的真棒字体,例如fa-5x等。由于担心它们可能会更改它,因此您必须不断链接应用程序代码以符合最新标准。您只需为要设置样式的每个字体超赞类提供相同的类,就可以避免这种情况:
<i class="fa fa-facebook-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-twitter-square fa-sabi-social-icons" aria-hidden="true"></i>
<i class="fa fa-google-plus-square fa-sabi-social-icons" aria-hidden="true"></i>
这里的课程是fa-sabi-social-icons
然后,在CSS中,可以使用与普通字体样式相同的CSS规则来样式化字体。例如
.fa-sabi-social-icons {
color: //your color;
font-size: // your font-size in px, em or %;
text-shadow: 2px 2px #FF0000;
}
那应该让您的字体真棒字体样式