Semantic UI es un marco CSS de código abierto basado en CSS y jQuery . Ayuda a construir diseños más rápido con sus elementos y módulos preconstruidos. En este artículo, veremos el conjunto de iconos de moneda proporcionado por Semantic UI.
Los iconos de la interfaz de usuario semántica establecen que la moneda nos ofrece una variedad diferente de cosas y actividades. Hay un total de 11 íconos en el conjunto de íconos de moneda que se pueden usar para representar monedas o unidades de moneda de varios países, como un signo de dólar, euro, yen, rublo y tantos como se menciona a continuación. En este artículo, conoceremos los íconos del conjunto de monedas de la interfaz de usuario semántica en varias formas, como íconos de colores o unidades o íconos de diferentes tamaños.
Icono de IU semántica establece clases de moneda:
- signo de dólar : estas clases se utilizan para mostrar el signo de moneda dólar.
- signo del euro : estas clases se utilizan para mostrar el signo de la moneda del euro.
- signo de lira : estas clases se utilizan para mostrar el signo de moneda lira.
- alternativa de billete de dinero : estas clases se utilizan para mostrar el icono de billete de dinero.
- contorno alternativo del billete de dinero : estas clases se utilizan para mostrar el icono del billete de dinero delineado.
- signo de libra : estas clases se utilizan para mostrar el signo de moneda de libra.
- signo del rublo: estas clases se utilizan para mostrar el signo de moneda del rublo.
- signo de rupia : estas clases se utilizan para mostrar el signo de moneda de la rupia.
- signo de shekel : estas clases se utilizan para mostrar el signo de moneda shekel.
- signo ganado : estas clases se utilizan para mostrar el signo de moneda ganado.
- signo de yen : estas clases se utilizan para mostrar el signo de moneda yen.
Sintaxis:
<i class="dollar sign icon"></i>
Ejemplo 1: El siguiente ejemplo ilustra el uso de los 11 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Currency</title>
<!-- Scripts and CSS -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.container {
text-align:center;
}
h4{
margin-top:0px;
}
.ui.grid {
margin-top:30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI - Icon Set Currency</strong>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon big dollar sign"></i>
</div>
<div class="four wide column">
<i class="icon big euro sign"></i>
</div>
<div class="four wide column">
<i class="icon big lira sign"></i>
</div>
<div class="four wide column">
<i class="icon big money bill alternate"></i>
</div>
<div class="four wide column">
<i class="icon big money bill alternate outline"></i>
</div>
<div class="four wide column">
<i class="icon big pound sign"></i>
</div>
<div class="four wide column">
<i class="icon big ruble sign"></i>
</div>
<div class="four wide column">
<i class="icon big rupee sign"></i>
</div>
<div class="four wide column">
<i class="icon big shekel sign"></i>
</div>
<div class="four wide column">
<i class="icon big won sign"></i>
</div>
<div class="four wide column">
<i class="icon big yen sign"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Ejemplo 2: El siguiente ejemplo muestra el uso de iconos de conjunto de divisas con diferentes colores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Currency</title>
<!-- Scripts and CSS -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI - Icon Set Currency</strong>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon red big dollar sign"></i>
</div>
<div class="four wide column">
<i class="icon yellow big euro sign"></i>
</div>
<div class="four wide column">
<i class="icon green big lira sign"></i>
</div>
<div class="four wide column">
<i class="icon teal big money bill alternate"></i>
</div>
<div class="four wide column">
<i class="icon grey big money bill alternate outline"></i>
</div>
<div class="four wide column">
<i class="icon blue big pound sign"></i>
</div>
<div class="four wide column">
<i class="icon violet big ruble sign"></i>
</div>
<div class="four wide column">
<i class="icon pink big rupee sign"></i>
</div>
<div class="four wide column">
<i class="icon brown big shekel sign"></i>
</div>
<div class="four wide column">
<i class="icon orange big won sign"></i>
</div>
<div class="four wide column">
<i class="icon big yen sign"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Ejemplo 3: El siguiente ejemplo muestra el uso de iconos de conjunto de divisas con variación de tamaño.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Icon Set Currency</title>
<!-- Scripts and CSS -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<style>
.ui.container {
text-align: center;
}
h4 {
margin-top: 0px;
}
.ui.grid {
margin-top: 30px !important;
}
</style>
</head>
<body>
<div class="ui container">
<div>
<h1 class="ui green header">GeeksforGeeks</h1>
<strong>Semantic UI - Icon Set Currency</strong>
</div>
<div class="ui grid">
<div class="four wide column">
<i class="icon small dollar sign"></i>
</div>
<div class="four wide column">
<i class="icon small euro sign"></i>
</div>
<div class="four wide column">
<i class="icon small lira sign"></i>
</div>
<div class="four wide column">
<i class="icon money bill alternate"></i>
</div>
<div class="four wide column">
<i class="icon money bill alternate outline"></i>
</div>
<div class="four wide column">
<i class="icon pound sign"></i>
</div>
<div class="four wide column">
<i class="icon large ruble sign"></i>
</div>
<div class="four wide column">
<i class="icon large rupee sign"></i>
</div>
<div class="four wide column">
<i class="icon large shekel sign"></i>
</div>
<div class="four wide column">
<i class="icon huge won sign"></i>
</div>
<div class="four wide column">
<i class="icon huge yen sign"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Conjunto de iconos de interfaz de usuario semántica
Enlace de referencia: https://semantic-ui.com/elements/icon.html#currency
Publicación traducida automáticamente
Artículo escrito por prashantrathore1159 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA