Home » Joomla! » Colocar imágen en enlace de menu

Colocar imágen en enlace de menu

Coloca en el nombre de tu enlace (dentro del menu), el código HTML a  la imagen, algo como esto:

<img src=images/stories/tu_icono.png>

ojo sin comillas, y si quieres el texto a la izquierda y la imagen a la derecha pues solo escribe el texto antes del código..

 Hola gente<img src=images/stories/tu_icono.png>

El icono hazlo como de 10x10px o algo asi para que no rompa el espacio, el resultado sería:

 

 

Otra alternativa es en el template_css.css modifica este contenedor a.mainlevel :

 

a.mainlevel  {   
margin           : 0px; 
padding          : 0px;   
font-size        : 12px;   
width            : 168px;    
background-color : #ECEAD8;   
text-indent      : 10px;    
background-image: url(../images/tu_icono.gif); /* este es tu icono personalizado*/ 
background-repeat: no-repeat; 
background-position: right; /* alineado a la derecha, o usa pixeles para ubicarlo
donde gustes observa el sig ejemplo*/ 
}

 

El resultado es un icono generalizado:

En este ejemplo para posicionar el icono con pixeles sustituye el right por estos para que no te quede la imagen hasta el extremo:

 

background-position: 120px;

 

Para posicionar el icono al lugar que mas te agrade dentro del enlace del menu, solo cambia el valor 120px. Y si quieres personalizar un elemento en particular con un icono mediante CSS en un enlace del menu usa la etiqueta span :

<span class=mainlevel_menu>Hola Gente</span>

De la misma manera creas una clase personalizada en tu archivo CSS para tu enlace, en este ejemplo es el .mainlevel_menu :

 

.mainlevel_menu  {   
background-image: url(../images/profile_smf.gif); 
background-repeat: no-repeat; 
background-position: 120px; 
display: block; /* importante que lo muestres en bloque para poder alinear el icono */ 
}

 

el resultado:

 

 

También se puede personalizar con el Page Class Suffix colocando el prefijo del selector correspondiente en este lugar, en fin, como verás hay muchas maneras de poner imágenes en los enlaces de menús.

Espero les sirva de algo este tutorial amigos

saludos