Fuente impresionante

Incluye Font Awesome en tu proyecto:
Agregue esta línea al

Utilizar un icono

Para usar un ícono, agregue un elemento o con las clases apropiadas:

Iconos de materiales

Incluye iconos de materiales en tu proyecto:
Añade esta línea al

Utilizar un icono

Para usar un ícono, agregue un elemento con la clase material-icons y el nombre del ícono:

camera_alt

2. Usando CSS para iconos personalizados

También puedes crear tus propios íconos con CSS. Aquí hay un ejemplo simple usando CSS puro:

Crear una estructura HTML básica

Agrega CSS para darle estilo a tu ícono

.icon-star {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    position: relative;
    transform: rotate(35deg);
}


.icon-star:before {
    content: '';
    position: absolute;
    top: 0;
    left: -50px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid gold;
    transform: rotate(-70deg);
}

Este fragmento de CSS crea una forma de estrella simple usando bordes y posicionamiento.

3. Iconos SVG

También puedes usar SVG para íconos de alta calidad:

SVG en línea

Usar SVG como imagen de fondo

.icon {
    width: 24px;
    height: 24px;
    background: url('data:image/svg xml;base64,...') no-repeat center center;
    background-size: contain;
}

Consejos

Tamaño y color: Para íconos de fuente y SVG en línea, puedes ajustar el tamaño con font-size o las propiedades de ancho y alto, y cambiar el color con color o relleno para SVG.
Accesibilidad: considere siempre la accesibilidad agregando texto descriptivo o atributos de aria cuando sea necesario.
¡Siéntete libre de experimentar y combinar diferentes métodos para encontrar el que funcione mejor para tu proyecto!