Para darle el Tamaño fuente a cualquier icono de cualquier librería debes usar la Propiedad font-size
y no width
.
Para que un Icono abarque el 100% de todo el viewport width y el viewport height (Alto y Ancho) no es posible, si usas `font-size: 100%, solo se abarcara el 100% el cual es el tamaño original del icono que vinculas.
Debes de darle un tamaño establecido en pixeles para notar un cambio de aumento. o si considera el tamaño que asigne en % serian valores muy elevados como font-size: 5000%;
Lo que sí puedes hacer es darle una class
o id
a la etiqueta donde esta tu icono
y con esa clase o id darle un width
y height
pero solo pa que ocupe toda la pantalla general no para su tamaño.
Te dejo un ejemplo:
En este caso usaremos los Iconos de Fontastic que permiten su uso con la CDN desde la nube.
Puedes usar cualquier fuente de iconos como el que mencionas icomoon
, o fontawesome
, ionicons
, etc.
/* RESET DE PÁGINA RETIRANDO MARGIN Y PADDING */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
background: red;
width: 100%;
height: 100vh; /* Para que siempre ocupe todo la altura disponible viewport height*/
}
.container .tamaño {
display: flex; /* FLEXBOX */
justify-content: center; /* Centrar Horizontalmente */
align-items: center; /* Centrar Verticalmente*/
font-size: 400px; /* Tamaño del icono a aumentar en % o PX*/
background: purple;
max-width: 100%;/* siempre ocupe el tamaño maximo de la pantalla*/
height: 100vh; /* Siempre ocupe todo su Alto según la pantalla*/
}
<!DOCTYPE html>
<html lang="es">
<head>
<title>Icons</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- ICONOS DE FONTASTIC -->
<link href="https://file.myfontastic.com/oZe3x9Y5SCuFb3PzfzgxRj/icons.css" rel="stylesheet">
</head>
<body>
<main class="container">
<i class="icon-smile-o tamaño"></i>
</main>
</body>
</html>
Como puedes ver el nombre .tamaño
es la clase que le di a la etiqueta i
donde esta el icono de Fontastic y con la cual manejo sus estilos.
De esta forma puedes darle un tamaño total que desee, y con font-size el tamaño preferiblemente en pixeles, rem, em que es lo mas frecuente en los iconos.
Espero sea de utilidad.