Semantic UI es un marco CSS rico en componentes que ayuda a desarrollar interfaces web receptivas. En este artículo, veremos los íconos médicos que vienen con la interfaz de usuario semántica. Hay un total de 17 íconos en el conjunto de íconos médicos que se pueden usar para representar acciones médicas comunes.
Conjunto de iconos de interfaz de usuario semántica Clases médicas:
- ambulancia: esta clase se utiliza para mostrar el icono de ambulancia.
- banda con ayuda: estas clases se utilizan para mostrar el icono de vendaje.
- dna: esta clase se utiliza para mostrar el icono de ADN.
- first with aid: estas clases se utilizan para mostrar el icono del botiquín de primeros auxilios.
- corazón: esta clase se utiliza para mostrar el icono del corazón.
- corazón con contorno: estas clases se utilizan para mostrar el icono del corazón con contorno.
- latido del corazón: esta clase se utiliza para mostrar el icono del latido del corazón.
- hospital: esta clase se utiliza para mostrar el icono del hospital.
- hospital con contorno: estas clases se utilizan para mostrar el icono del hospital con contorno.
- hospital con símbolo: Estas clases se utilizan para mostrar el icono del símbolo H.
- pastillas: Esta clase se utiliza para mostrar el icono de pastillas.
- plus: esta clase se utiliza para mostrar el icono más.
- estetoscopio: esta clase se utiliza para mostrar el icono del estetoscopio.
- jeringa: esta clase se utiliza para mostrar el icono de la jeringa.
- termómetro: esta clase se utiliza para mostrar el icono del termómetro.
- usuario con md: estas clases se utilizan para mostrar el icono de usuario con un estetoscopio.
- peso: Esta clase se utiliza para mostrar el icono de la máquina de pesaje.
Sintaxis:
<i class="icon Medical-Icon-Class/Classes"></i>
Ejemplo: El siguiente ejemplo muestra el uso de los 17 íconos enumerados anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Medical</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 Medical</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon big ambulance"></i>
</div>
<div class="three wide column">
<i class="icon big band aid"></i>
</div>
<div class="three wide column">
<i class="icon big dna"></i>
</div>
<div class="three wide column">
<i class="icon big first aid"></i>
</div>
<div class="three wide column">
<i class="icon big heart"></i>
</div>
<div class="three wide column">
<i class="icon big heart outline"></i>
</div>
<div class="three wide column">
<i class="icon big heart beat"></i>
</div>
<div class="three wide column">
<i class="icon big hospital"></i>
</div>
<div class="three wide column">
<i class="icon big hospital outline"></i>
</div>
<div class="three wide column">
<i class="icon big hospital symbol"></i>
</div>
<div class="three wide column">
<i class="icon big pills"></i>
</div>
<div class="three wide column">
<i class="icon big plus"></i>
</div>
<div class="three wide column">
<i class="icon big stethoscope"></i>
</div>
<div class="three wide column">
<i class="icon big syringe"></i>
</div>
<div class="three wide column">
<i class="icon big thermometer"></i>
</div>
<div class="three wide column">
<i class="icon big user md"></i>
</div>
<div class="three wide column">
<i class="icon big weight"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el uso de iconos médicos de conjunto de iconos con diferentes tamaños y colores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI - Icon Set Medical</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 Medical</h3>
</div>
<div class="ui grid">
<div class="three wide column">
<i class="icon red small ambulance"></i>
</div>
<div class="three wide column">
<i class="icon orange small band aid"></i>
</div>
<div class="three wide column">
<i class="icon yellow small dna"></i>
</div>
<div class="three wide column">
<i class="icon olive large first aid"></i>
</div>
<div class="three wide column">
<i class="icon green large heart"></i>
</div>
<div class="three wide column">
<i class="icon teal large heart outline"></i>
</div>
<div class="three wide column">
<i class="icon blue big heart beat"></i>
</div>
<div class="three wide column">
<i class="icon violet big hospital"></i>
</div>
<div class="three wide column">
<i class="icon purple big hospital outline"></i>
</div>
<div class="three wide column">
<i class="icon pink big hospital symbol"></i>
</div>
<div class="three wide column">
<i class="icon brown huge pills"></i>
</div>
<div class="three wide column">
<i class="icon grey huge plus"></i>
</div>
<div class="three wide column">
<i class="icon black huge stethoscope"></i>
</div>
<div class="three wide column">
<i class="icon green huge syringe"></i>
</div>
<div class="three wide column">
<i class="icon yellow huge thermometer"></i>
</div>
<div class="three wide column">
<i class="icon teal huge user md"></i>
</div>
<div class="three wide column">
<i class="icon red huge weight"></i>
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#medical