La interfaz de usuario semántica es un marco CSS que ayuda a desarrollar interfaces web hermosas y receptivas más rápido. En este artículo, echaremos un vistazo a los iconos de deportes que se incluyen en la interfaz de usuario semántica. Hay un total de 11 íconos en el conjunto de íconos de deportes que se pueden usar para representar varios juegos y actividades.
Conjunto de iconos de interfaz de usuario semántica Clases deportivas:
- béisbol con pelota: estas clases se utilizan para mostrar el icono de béisbol.
- baloncesto con pelota: estas clases se utilizan para mostrar el icono de baloncesto.
- bolos con bola: estas clases se utilizan para mostrar el icono de la bola de bolos.
- fútbol con balón: estas clases se utilizan para mostrar el icono del balón de rugby.
- futbol: Estas clases se utilizan para mostrar el icono del fútbol.
- futbol con contorno: Estas clases se utilizan para mostrar el icono de fútbol delineado.
- golf con pelota: estas clases se utilizan para mostrar el icono de la pelota de golf.
- hockey con disco: estas clases se utilizan para mostrar el icono del disco de hockey.
- quidditch: estas clases se utilizan para mostrar el icono de quidditch.
- mesa con tenis: Estas clases se utilizan para mostrar el icono de tenis de mesa.
- voleibol con pelota: estas clases se utilizan para mostrar el icono de voleibol.
Sintaxis:
<i class="icon Sports-Icon-Class/Classes"></i>
Ejemplo: El siguiente ejemplo muestra el uso de los 11 íconos deportivos que vienen con Semantic UI.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Sports</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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>
Producción:
Interfaz de usuario semántica: conjunto de iconos deportivos
Ejemplo 2: El siguiente ejemplo muestra la variación de los íconos deportivos del conjunto de íconos en la interfaz de usuario semántica.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Sports</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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>
Producción:
Interfaz de usuario semántica: conjunto de iconos, variación deportiva
Referencia: https://semantic-ui.com/elements/icon.html#sports