Semantic UI is a CSS framework that helps in developing beautiful and responsive web interfaces faster. In this article, we will be taking a look at the Sports icons that are included in Semantic UI. There are a total of 11 icons in the Sports icon set that can be used to represent various games and activities.
Semantic-UI Icon Set Sports Classes:
- baseball with ball: These classes are used to show the baseball icon.
- basketball with ball: These classes are used to show the basketball icon.
- bowling with ball: These classes are used to show the bowling ball icon.
- football with ball: These classes are used to show the rugby ball icon.
- futbol: These classes are used to show the football icon.
- futbol with outline: These classes are used to show the outlined football icon.
- golf with ball: These classes are used to show the golf ball icon.
- hockey with puck: These classes are used to show the hockey puck icon.
- quidditch: These classes are used to show the quidditch icon.
- table with tennis: These classes are used to show the table tennis icon.
- volleyball with ball: These classes are used to show the volleyball icon.
Syntax:
<i class="icon Sports-Icon-Class/Classes"></i>
Example: The below example shows the use of all 11 sports icons that come with Semantic UI.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic UI - Icon Set Sports</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Semantic UI - Icon Set Sports</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon big baseball ball"></i>
</div>
<div class="three wide column">
<i class="icon big basketball ball"></i>
</div>
<div class="three wide column">
<i class="icon big bowling ball"></i>
</div>
<div class="three wide column">
<i class="icon big football ball"></i>
</div>
<div class="three wide column">
<i class="icon big futbol"></i>
</div>
<div class="three wide column">
<i class="icon big futbol outline"></i>
</div>
<div class="three wide column">
<i class="icon big golf ball"></i>
</div>
<div class="three wide column">
<i class="icon big hockey puck"></i>
</div>
<div class="three wide column">
<i class="icon big quidditch"></i>
</div>
<div class="three wide column">
<i class="icon big table tennis"></i>
</div>
<div class="three wide column">
<i class="icon big volleyball ball"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI – Icon Set Sports
Example2: The example below shows the variation of icon set sports icons in Semantic UI.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic UI - Icon Set Sports</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
.ui.container {
text-align: center;
}
h3 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Semantic UI - Icon Set Sports</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon red small baseball ball"></i>
</div>
<div class="three wide column">
<i class="icon orange small basketball ball"></i>
</div>
<div class="three wide column">
<i class="icon yellow small bowling ball"></i>
</div>
<div class="three wide column">
<i class="icon olive large football ball"></i>
</div>
<div class="three wide column">
<i class="icon green large futbol"></i>
</div>
<div class="three wide column">
<i class="icon teal large futbol outline"></i>
</div>
<div class="three wide column">
<i class="icon blue big golf ball"></i>
</div>
<div class="three wide column">
<i class="icon violet big hockey puck"></i>
</div>
<div class="three wide column">
<i class="icon purple big quidditch"></i>
</div>
<div class="three wide column">
<i class="icon pink huge table tennis"></i>
</div>
<div class="three wide column">
<i class="icon brown huge volleyball ball"></i>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic UI – Icon Set Sports Variation
Reference: https://semantic-ui.com/elements/icon.html#sports