La interfaz de usuario semántica es un marco de interfaz de usuario rico en componentes que ayuda a crear hermosas experiencias web. En este artículo, echaremos un vistazo a los iconos de ajedrez que vienen con la interfaz de usuario semántica. Hay 9 íconos de ajedrez que se pueden usar para representar cosas relacionadas con el ajedrez.
Conjunto de iconos de interfaz de usuario semántica Clases de ajedrez:
- ajedrez : esta clase muestra un icono que contiene un rey y una torre.
- alfil de ajedrez : estas clases se utilizan para mostrar el icono del alfil.
- tablero de ajedrez : estas clases se utilizan para mostrar el icono del tablero de ajedrez.
- rey del ajedrez : estas clases se utilizan para mostrar el icono del rey.
- caballo de ajedrez : estas clases se utilizan para mostrar el icono del caballo.
- peón de ajedrez : estas clases se utilizan para mostrar el icono del peón.
- reina del ajedrez : estas clases se utilizan para mostrar el icono de la reina.
- torre de ajedrez : estas clases se utilizan para mostrar el icono de la torre.
- cuadrado lleno : estas clases se utilizan para mostrar un solo icono de cuadrado de ajedrez.
Sintaxis:
<i class="icon Chess-Icon-Class/Classes"> </i>
Ejemplo: El siguiente ejemplo muestra el uso de los 9 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Chess</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 Chess</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon big chess"></i>
</div>
<div class="three wide column">
<i class="icon big chess bishop"></i>
</div>
<div class="three wide column">
<i class="icon big chess board"></i>
</div>
<div class="three wide column">
<i class="icon big chess king"></i>
</div>
<div class="three wide column">
<i class="icon big chess knight"></i>
</div>
<div class="three wide column">
<i class="icon big chess pawn"></i>
</div>
<div class="three wide column">
<i class="icon big chess queen"></i>
</div>
<div class="three wide column">
<i class="icon big chess rook"></i>
</div>
<div class="three wide column">
<i class="icon big square full"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo muestra variaciones de íconos de Ajedrez con diferentes tamaños y colores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Chess</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 Chess</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon pink small chess"></i>
</div>
<div class="three wide column">
<i class="icon teal small chess bishop"></i>
</div>
<div class="three wide column">
<i class="icon grey chess board"></i>
</div>
<div class="three wide column">
<i class="icon blue chess king"></i>
</div>
<div class="three wide column">
<i class="icon red large chess knight"></i>
</div>
<div class="three wide column">
<i class="icon yellow large chess pawn"></i>
</div>
<div class="three wide column">
<i class="icon green big chess queen"></i>
</div>
<div class="three wide column">
<i class="icon pink huge chess rook"></i>
</div>
<div class="three wide column">
<i class="icon violet big square full"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/icon.html#chess