Hola @brendhita1203 dentro del shortcode [tab] puedes utilizar html, si no te manejas con el html puedes crear el contenido en el editor de WordPress y después ir a la vista de HTML, copiar las etiquetas y contenido y ponerlas dentro del shortcode.
En el código que pones, por ejemplo para mostrar un icono y el texto Este es mi contenido en negrita, en la segunda pestaña deberías de poner:
[tg_ver_tab align="right" tab1="Tab 1" tab2="Tab 2" tab3="Tab 3"]
[tab id="1"]Your Content…[/tab]
[tab id="2"]<img src="https://png.icons8.com/metro/50/000000/home.png"> <strong>Este es mi contenido</strong>[/tab]
[tab id="3"]Your Content…[/tab]
[/tg_tab]
Saludos.
-
Esta respuesta fue modificada hace 5 años, 11 meses por
Carlos Longarela. Razón: cambio de comillas a las adecuadas
hola @carloslongarela ..gracias por la informacion..peor no era lo que deseaba..yo me referia a que en el mismo cuadro del Itineraryo poner ese icono …no dentro dle contenido…pero gracias por la ayuda
(me esperaba ahcer algo asi)
Detalles|itinerario ♥|recomendaciones
…pero gracias
Hola @brendhita1203 ok, entonces por lo que entiendo quieres poner el icono en el título de la pestaña, ¿verdad?
De ser así, ¿probaste a insertar el icono en el propio título?
[tg_ver_tab align="right" tab1="Detalles" tab2="Itinerario ♥" tab3="Recomendaciones"]
[tab id="1"]Contenido de la pestaña detalles[/tab]
[tab id="2"]Contenido de la pestaña itinerario[/tab]
[tab id="3"]Contenido de la pestaña recomendaciones[/tab]
[/tg_tab]
Otra opción es mediante CSS, en la url que indicas mirando el código fuente, veo que por ejemplo la pestaña Itinerary genera un html con el siguiente código:
<a href="#tabs-2" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2">Itinerary</a>
como cada pestaña tiene un id único (ui-id-2en este caso) puedes crear un css para darle el estilo personalizado que desees, por ejemplo para poner ese corazón antes del texto:
#ui-id-2::before {
content: "♥ ";
}
para ponerlo después:
#ui-id-2::after {
content: " ♥";
}
Te dejo un ejemplo en https://codepen.io/carlos_longarela/pen/pKvRqo
o gracias @carloslongarela ..intentare probar con ese codigo..pero mi icono no era el corazoncito..sino un archivo .icon …osea una imagen miniatura..pero lo probare..
@carloslongarela GRACIASSS…me salvaste…bueno use el content: url(link d emi icono);..pero muchas gracias d etodos modos
Me alegro que la respuesta te ayudase para la solución.
Saludos.
jejej.. perdon..creo que talvez me estoy exediendo pero @carloslongarela..esque mira lo que logre..lo puse el icono y todo..pero no logro aliniarlo para que vaya al medio como sus vecinos..eh intentado jugar con el margen y el tex aling..y mas ..pero no logro nada..quisa tu pueedas ver algo que yo no?..de ante mano muchas gracias
http://elementalexperiencestravel.com/tours/cusco-city/
Hola @brendhita1203 suele ser bastante problemático alinear imágenes de urls, en este caso lo mejor sería que utilizases una imagen un poco más pequeña, por ejemplo la que te pongo en la url que puedes descargar es de 12px en vez de 20px, de paso puedes darle un poco de separación con el texto de la izquierda con un padding left:
#ui-id-2::after {
content: url(https://filedn.com/l63pvnhu2y8J5sV2X4EXgYy/wp-forums/ubicacion-mapa-12.png);
padding-left: 6px;
}
Con la imagen de 20px estás haciendo más alta la pestaña de selección por lo que se descoloca el texto de la misma.
