Font Awesome Trophy Icon
Usage
<i class="fa fa-trophy"></i>
Out of the box
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-trophy"></i>
</body>
</html>
Live Demo
See the Pen icon trophy example-1 by w3resource (@w3resource) on CodePen.
Large Icon
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-trophy fa-5x"></i>
<!--use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes-->
</body>
</html>
Live Demo
See the Pen icon trophy example-2 by w3resource (@w3resource) on CodePen.
Change color
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
.fa_custom {
color: #0099CC
}
</style>
</head>
<body>
<i class="fa fa-trophy fa_custom"></i>
<i class="fa fa-trophy fa_custom fa-2x"></i>
<i class="fa fa-trophy fa_custom fa-3x"></i>
<i class="fa fa-trophy fa_custom fa-4x"></i>
</body>
</html>
Live Demo
See the Pen icon trophy example-3 by w3resource (@w3resource) on CodePen.
Previous: Font Awesome Tree Icon
Next:
Font Awesome Truck Icon
It will be nice if you may share this link in any developer community or anywhere else, from where other developers may find this content. Thanks.
https://w3resource.com/icon/font-awesome/web-application-icons/trophy.php
- Weekly Trends and Language Statistics
- Weekly Trends and Language Statistics