Ya veíamos hace tiempo cómo podíamos crear un enlace en una página web que al pulsarle llamase por teléfono. Ahora vamos a ver cóm podemos dar formato para enlaces a teléfonos con CSS de tal manera que le pongamos un icono de un teléfono delante del texto y modifiquemos sus propiedades de visualización.
Lo primero será incluir el enlace al teléfono. Para ello ya vimos que es crear un enlace mediante un elemento anchor pero indicando que el protocolo de comunicación tel://. Esto quedará de la siguiente forma:
<a href="tel:+34695685920">Llamar al +34 695 68 59 20</a>
Ahora lo que pasaremos será a utilizar CSS para poder darle forma a este enlace. El selector sobre el que nos vamos a apoyar será el del protocolo. Ya que será un selector que nos permite identificar bien a este tipo de enlaces y que nos servirá de tener más de un enlaces a teléfonos en la página.
Así definimos el selector en el CSS de la siguiente forma:
a[href^="tel:"]{...}
Lo primero es ir a por algo fácil como será modificarlo el color y quitarle en subrayado que aparece por defecto en los enlaces. Para ello vamos a modificar las propiedades color y text-decoration dándoles los valores organge y none respectivamente.
a[href^="tel:"] {
color: orange;
text-decoration: none;
}
Ahora nuestro enlace al teléfono aparecerá en color naranja y sin subrayado.
Pero vayamos un paso más allá y lo que haremos será el poner un icono de teléfono delante del número. De esta manera, al usuario, no lo quedará la mayor duda de que al pulsar el enlace accederá a un número de teléfono. Para ello tenemos que saber dos cosas. La primera es que el selector deberá de indicar la propiedad before para poder modificar lo que va antes del elemento y añadir contenido.
a[href^="tel:"]:before {...}
El contenido lo podremos añadir mediante la propiedad content y el icono lo conseguireos con una entidad HTML, en concreto con la \260e que es la que representa el teléfono ☎. Además separaremos el contenido del número de teléfono aumentando el margen derecho con margin-right.
a[href^="tel:"]:before {
content: "\260e";
margin-right: 0.5em;
}
Al final, todo el código que nos permite dar formato para enlaces a teléfonos con CSS quedaría de la siguiente forma:
a[href^="tel:"]:before {
content: "\260e";
margin-right: 0.5em;
}
a[href^="tel:"] {
color: orange;
text-decoration: none;
}
