Buenas, todos conocemos las fuentes iconos que hay en la web como: Fontawesome, Metro UI, Entypo, Dashicons, Glyphicon, etc. Pero también existen paginas especializadas en recopilar de todas estas fuentes y uno puede elegir que cada fuente un icono que mas se adecue a nuestras necesidades. Algunas de estas son: Fontello, Icon Moon, Fontastic, etc.
Pero, esta vez, vamos a realizar un manual para, aparte de elegir iconos hechos por estas pagina o elegir iconos ya hechos, podremos crear nuestro propios iconos e insertarlos junto con las fuentes que hallamos elegido de antemano.
En esta ocasión vamos a utilizar un app llamada Inkscape para crear nuestro icono y la pagina de Fontello para insertar nuestro icono con los de mas que hallamos elegido. Para ello tome una imagen del logo de esta pagina web (blog3web).
Abrimos Inkscape y comenzamos a editar esta imagen para convertirla en .svg
Después de quedar satisfecho en el diseño guardamos la imagen con la extensión .svg. Se debe guardar solo en blanco u negro. A continuación abrimos un navegador que utilices, en mi caso usare Vivaldi. Ingresamos a la pagina de Fontello.
Allí encontraras un gran numero de iconos de varias fuentes creadas con iconos en internet. Podemos elegir las que mas necesitemos. Es aquí en donde nosotros podemos agregar nuestros propios diseños y convertirlos en fuente de iconos.
Debemos arrastrar nuestro iconos que esta en el PC a la pagina web de Fontello, como se muestra en la imagen de abajo.
Después de que la pagina haya reconocido y convertido nuestro archivo, podremos seleccionar mas iconos que contiene Fontello. Cuando estemos listos, debemos descargar la colección de iconos, más nuestro icono personalizado en un botón rojo ubicado en la parte superior derecha de la pagina.
Y eso es todo, nuestro icono ya es una fuente para utilizar en el PC, pagina web, etc.
Mostrando nuestro icono personalizado
Ahora vamos a mostrar nuestro icono personalizado como se vería en una pagina web. Para ello vamos a crear dos archivos, como son: index.html y style.css.
En ellos colocaremos el siguiente código:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="style.css">
<title>Probando iconos personalizado con fontello</title>
</head>
<body>
<div class="container-fluid">
<div class="row align-items-center">
<div class="container">
<div class="row align-items-center">
<div class="col-4 text-center"><i class="icon-user"></i></div>
<div class="col-4 text-center"><i class="icon-b3wlogoico"></i></div>
<div class="col-4 text-center"><i class="icon-thumbs-up-alt"></i></div>
</div>
</div>
</div>
</div>
</body>
</html>archivo index.html
html, body, .container-fluid, .container-fluid>.row { height: 100%; }
.container-fluid>.row>.container>.row {
height: 434px;
background-color: #213957;
}
i {
color: #213957;
font-size: 150px;
border-radius: 8px;
background-color: #fff;
}archivo style.css
Y aquí tenemos nuestro resultado, una pagina con nuestros iconos personalizados.
Bueno, espero que les guste este manual para crear tus fuentes con nuestros propios iconos personalizados.
