Este es el sexto tutorial de la serie dedicada al tema emblemático de ThemeIsle, que nos permitirá agregar nuevos iconos y enlaces a perfiles de redes sociales en el pie de página.
Zerif Lite incluye de manera predeterminada las siguientes redes sociales: Facebook, Twitter, LinkedIn, Instagram, Bēhance y Dribbble. Estas dos últimas son más orientadas a los portfolios de diseño y es probable que la mayoría de los usuarios no necesiten mostrarlas.
Para eliminar estos iconos, basta con abrir el Personalizador, ir a Opciones generales > Redes sociales y dejar los campos correspondientes en blanco (borrar los símbolos #).
Añadir iconos nuevos o reemplazar iconos antiguos en el tema Zerif no es muy complicado en realidad. Solo hace falta una línea de código para que funcione. Antes de comenzar este tutorial, debemos asegurarnos de que estamos usando un tema hijo. Las instrucciones para crear un tema hijo se encuentran en esta entrada anterior.
Primero, copiamos el archivo footer.php del tema padre a la carpeta del tema hijo. Luego, abrimos el archivo footer.php del tema hijo y buscamos el siguiente código:
if ( ! empty( $zerif_socials_instagram ) ) {
echo '<li id="instagram"><a' . $attribut_new_tab . ' href="' . esc_url( $zerif_socials_instagram ) . '"><span class="sr-only">' . __( 'Instagram link', 'zerif-lite' ) . '</span> <i class="fa fa-instagram"></i></a></li>';
}
echo '</ul><!-- .social -->';Queremos añadir, por ejemplo, un icono para YouTube. Ahora nada más necesitamos pegar la siguiente línea de código justo antes del echo '</ul><!-- .social -->'; mostrado más arriba:
/* youtube */
echo '<li><a target="_blank" href="#"><i class="fa fa-youtube"></i></a></li>';Con lo cual, la sección ahora se verá más o menos así:
/* instagram */
if ( ! empty( $zerif_socials_instagram ) ) {
echo '<li id="instagram"><a' . $attribut_new_tab . ' href="' . esc_url( $zerif_socials_instagram ) . '"><span class="sr-only">' . __( 'Instagram link', 'zerif-lite' ) . '</span> <i class="fa fa-instagram"></i></a></li>';
}
/* youtube */
echo '<li><a target="_blank" href="#"><i class="fa fa-youtube"></i></a></li>';
echo '</ul><!-- .social -->';
Eso es todo. Obviamente, tendremos que reemplazar el símbolo # del código href con el enlace correspondiente al perfil de la red social.
¿Qué tal si queremos cambiar el tamaño de los iconos? El de YouTube, al menos, no ha quedado del todo nítido. Simplemente, añadimos el siguiente código CSS (en el archivo custom.css del tema hijo, o en el recuadro CSS adicional del Personalizador):
.social li a {
font-size: 24px;
}
¡Mucho mejor!
Los iconos para las demás redes sociales se pueden encontrar en la siguiente dirección: Font Awesome (sección Brand Icons). El código será algo así como <i class="fa fa-nombre_de_la_red_social"></i>.
Y ya que estamos con el archivo footer.php, puede que también queramos modificar el enlace del pie de página “Zerif Lite desarrollado por ThemeIsle” o directamente eliminarlo.
Buscamos la línea:
echo '<div class="zerif-copyright-box"><a class="zerif-copyright" rel="nofollow">Zerif Lite </a>' . __( 'developed by', 'zerif-lite' ) . ' ' . '<a class="zerif-copyright" href="' . esc_url( 'https://themeisle.com' ) . '" ' . $attribut_new_tab . ' rel="nofollow"> ' . __( 'ThemeIsle', 'zerif-lite' ) . '</a></div>';
La suprimimos si no queremos mostrar ningún texto ni enlace. O bien, si queremos mostrar el nombre del sitio y un enlace a la portada, lo reemplazamos por el siguiente código:
echo '<div class="zerif-copyright-box"><a class="zerif-copyright" href="'.home_url('/').'" title="'.esc_attr(get_bloginfo('name', 'display')).'">'.esc_attr(get_bloginfo('name', 'display')).'</a></div>';O algo más personalizado para mostrar el año, un título a elección y una URL a elección que se abra en una ventana o pestaña nueva:
echo '©'.date ('Y').'<div class="zerif-copyright-box"><a class="zerif-copyright" target="_blank" href="http://mi-url-personalizada.com" title="Título de mi Web">Título Personalizado</a></div>';Así quedaría nuestro pie de página.
Tutorial original en inglés: How to add new social icons to Zerif footer
Técnica en electromecánica, periodista, entusiasta de los idiomas y enamorada de WordPress. Amante del mate, la lectura, la música y las series de sci-fi. Mamá de una vizsla loca.
- Guía para WordPress 6.6 disponible - 22 de septiembre de 2024
- Guía para WordPress 6.5 disponible - 13 de junio de 2024
- Guía para WordPress 6.4 disponible - 5 de diciembre de 2023
Hola, Alejandro.
Hacé lo siguiente: en el archivo
functions.phpdel tema hijo, pegá:function zerif_child_footer_nav() { ?> <ul class="footer-nav"> <li><a href="#">Página 1</a></li> <li><a href="#">Página 2</a></li> <li><a href="#">Página 3</a></li> </ul> <?php } add_action( 'zerif_bottom_footer', 'zerif_child_footer_nav' );Tendrás que reemplazar cada
#por la URL completa que corresponda, y escribir el título de las páginas.En el archivo
custom.cssdel tema hijo pegá:.footer-nav { list-style: none; float: left; margin-left: 0; } .footer-nav > li { display: inline; margin-right: 20px; } .footer-nav > li a { color: #999; } .footer-nav > li a:hover { color: inherit; }Las dos primeras clases son para que tome la orientación horizontal, las dos restantes para ajustar los colores.
Espero que te sirva.
Saludos.
Primero que todo, nuevamente felicitarte por los tutoriales.
Quisiera preguntarte si hay alguna forma de agregar en el footer los links a las tipicas paginas de contactenos, quienes somos, politica de privacidad y demas. Creo que quedaria genial con el estilo ponerlas debajo de donde sale el telefono, direccion, y demas. Es esto posible? o por lo menos hay algun metodo ponerlo en cualquier parte del footer?
Hola,
¿Hay alguna forma de incorporar los iconos de redes sociales en la cabecera junto al menú? ¿Con un widget, o editando código? Si me indicas que es posible y qué archivo habría que modificar en ese caso, no necesito mucho más.
Gracias de antemano
Hola, Elena.
Fijate en esta respuesta.
Saludos.
Hola! Los iconos sociales no me estan apareciendo, solo aparece un cuadrito pero no el icono social, si le das click al cuadrito te lleva al link pero el icono no se ve
Hola, Emmanuel.
Esto sucede cuando las fuentes de Font Awesome no están cargando correctamente, pero podría estar ocasionado por varios factores. Probá desactivando plugins, y probá ingresando al dominio con y sin
wwwpara ver si hay diferencia.Saludos.
Hola Ana Ayelén, Gabriel de este lado, ya en otra ocasión me has dado gran ayuda. Esta vez, con este tema, deseo ubicar en el header en la derecha algo parecido al ejemplo de estas paginas: http://www.mopc.gob.do/transparencia, y http://rdvial.gob.do/, ¿Podrías ayudarme por favor?
Hola, Gabriel.
El nivel de personalización para lograr lo que me comentás va más allá de la ayuda que te pueda dar por este medio. Si necesitás un campo de búsqueda en la cabecera, podés aplicar este tutorial.
Saludos.
Gracias Ana, me dió ideas lo que me sugeriste, ahora solo me falta cambiar el color gris de la sección footer, y que los widget del footer queden por debajo de este; ¿podrías ayudarme?
Abrazos
Gabriel
Hola, Gabriel.
Fijate en esta y esta respuestas.
Saludos.
Gracias por tu ayuda Ana, Gabriel de nuevo. En el tema anterior de Zerif, explicas como añadir un icono de youtube en el footer-redes sociales, pero ahora, en el footer de la nueva versión, este código ha cambiado; ¿hay algún post con esta nueva modificación?
Saludos y Gracias
Gabriel
Hola, Gabriel.
En la versión del repositorio, el código debería ir justo arriba de la línea
echo '</ul><!-- .social -->';Saludos.
Buenas amigo. Te felicito por tu web y gracias por la informacion que brindas.
Tratando de seguir los pasos de este post he cometido un ‘error fatal’. Estoy seguro que sabes a que me refiero.
Estuve tratando de modificar el fuction.php y footer.php desde el editor de wordpress pero algo salio mal y ahora al cargar la pagina obtengo el siguiente error:
Fatal error: Cannot redeclare zerif_scripts() (previously declared in /home/u616665143/public_html/wp-content/themes/zerif-lite/functions.php:264) in /home/u616665143/public_html/wp-content/themes/zerif-lite/functions.php on line 1650
Agradezco cualquier indicio para reparar esto. Saludos cordiales.
Hola, Carlos.
Entrá por FTP o vía panel de control y renombrá la carpeta
/zerif-lite/(puede ser/zerif-old/o el nombre que quieras) que se encuentra en/public_html/wp-content/themes/; luego volvé a iniciar sesión en WP (te dirá que el tema actual está roto y volverá al predeterminado). Ahí volvé a instalar Zerif desde Temas > Añadir nuevo.Y si vas a hacer cambios de código que sea en un tema hijo.
Saludos.
Hola. Te agradeceria mucho si me indicas en que parte del tema hijo debo añadir mi pixel de facebook para hacerlo en cada pagina creada, o si lo agrego al Zerif padre, gracias
Hola, Freddy.
Debería ir dentro del archivo
header.php, antes del cierre de la etiqueta</head>. De todas maneras, podrías usar un plugin si necesitás más control (por ejemplo, excluirlo de ciertas páginas).Saludos.
Buenas noches,
¿Sería posible poner los iconos sociales en el header? A la derecha del menú, o a la derecha del logo.
Mil gracias;)
Hola, Borja.
Fijate en esta respuesta.
Saludos.
Hola gracias por tu blog! me siento torpe pero pongo los enlaces de facebook y de linkedin y me lleva a mi web, no a los perfiles. No se que estoy haciendo mal..si quito # no me hace el enlace, si la pongo y despues la direccion del sitio, nada no me lo hace bien. solo me pasa en las redes sociales del pie de pagina, en la de los perfiles personales si funciona.
gracias de antemano
Hola, Laura.
Debería funcionar si escribiste la dirección completa. El
#hay que borrarlo y pegar la URL con el prefijohttps://, por ejemplohttps://www.facebook.com/PAGINA.Saludos.
Ana, eres la mejor entre las mejores… ¡Mi heroína! No hay cosa que se me ocurra hacer con mi Zerif Lite que se te escape… 😉
Justo andaba buscando este tema, he seguido tus instrucciones y me ha surgido la misma duda que a Rubén… Y ya está, solucionado: iconos de redes sociales nuevos, relucientes y bien enlazados. ¡Así da gusto, chica!
¡Gracias!
Marga Rubio Soto
www.spanish4bizbcn.com
Hola , tengo instalada la version Zerif Lite,
1.De repente me apareció en la parte superior junto al logo un botón de “Cambiar navegación” que me gustaria desactivar. En el personalizador no he encontrado la manera.
2. Me desaparecieron las iconas de las redes sociales en el footer y se canviaron por letra “go to FacebooK”…me gustaria reestablecerlos.
Muchas gracias por anticipado!
Hola, Ernest.
No llego a ver los errores, si es la URL de tu comentario. Si es otro sitio, tendría que verlo en funcionamiento.
Saludos.
Lo he solucionado actualizando el tema. Gracias
Lo primero felicitarte por este trabajo… MUchiiiiiiiiiiiisimas gracias, ha sido de gran ayuda… Mi pregunta es que si los iconos de las redes sociales se pueden poner en el header en lugar del footer… dime algo muchas gracias .
Hola, Carlos.
Gracias por tu comentario.
Fijate en esta respuesta, que es para agregarlos como elementos de menú.
Saludos.
Muchas gracias… indagando los he puesto ya de otra forma… muchas gracias por tu respuesta tan rapida… un saludo
Hola. Por lo que veo en esta página del tutorial sólo se indica como modificar la parte de la derecha del footer. Lo que yo quisiera saber es cómo agregar un ícono más en la parte izquierda (para agregar más de una dirección y para agregar un ícono de nextel). Agradeceré cualquier tipo de ayuda.
Hola, Toli.
Para eso tendrías que agregar el código a mano en el archivo
footer.php(a continuación de la sección/* COMPANY PHONE NUMBER */) y ajustar mediante CSS el ancho de las columnas.Saludos.
Esto también aplica para Zerif Pro?
Sí, aunque Zerif Pro tiene opciones para agregar iconos de Google+, Pinterest, Tumblr, Reddit y YouTube directamente desde el Personalizador.
Si, en realidad busco agregar un ícono para Nextel.
¡Hola!
He intentado hacer el cambio de modificar el enlace del pie de página “Zerif Lite funciona con WordPress”.
Creo que lo he hecho mal y ahora no me carga la página :-S
¿Qué puedo hacer?
¡Gracias de antemano!
Hola, Paty.
Simplemente borrá de la carpeta del tema hijo el archivo
footer.php. También fijate que el código defunctions.phpno contenga errores.Saludos.
Perdón, acabo de ver que viene mas abajo, torpe de mí 🙂
Hola, Noemy. No hay problema. Gracias por comentar, y para cualquier otra duda, aquí estamos. 🙂
Saludos.
Hola! Muchisimas gracias por esta serie de tutoriales, me está facilitando enormemente la labor con esta plantilla.
La pregunta es cómo puedo poner otras redes como Vimeo o Flickr, he intentado cambiando el nombre pero no me sale nada.
Muchísimas gracias
hola
Gracias por todas las ayudas que nos dan me han servido mucho.
Quiero preguntarte algo como hago para que la pagina de inicio se mantenga pero que las entradas vallan a otra pagina. es que me voy voy a personalizar y cambio a pagina estática pero el home se me desaparece. te agradeceria la ayuda gracias
Hola, Alejandro.
Gracias por tu comentario. Si te referís a los enlaces del menú, tenés que ir a Apariencia > Menús, elegir las páginas y asignarlas al Menu primario.
Saludos.
Buenas tardes. Felicidades por este tutorial de mucha ayuda. Mi pregunta es, estoy ocupando esta plantilla Zerif Lite pero en el area del Footer Copyright me gustaria que me apareciera de forma horizontal no de forma vertical. Me pueden ayudar como hacer.. Gracias
Hola, Daniel.
Gracias por tu comentario.
Depende de lo que quieras mostrar, fijate editando el archivo
footer.phpy luego reducir el relleno (padding) de las clases.company-detailsy.copyrighten el archivocustom.css.Saludos.
Hola! La duda que tengo es cómo se puede añadir un icono de una red social que no está en Font Awesome (como ReserchGate) en los miembros de “Nuestro Equipo”. ¿Me podéis echar una mano?
Mil Gracias
Hola, Ibán.
Podés tomar como referencia este tutorial, que te indica cómo reemplazar los iconos de los miembros de equipo.
Ahora bien, como ese icono en particular no existe en Font Awesome, tendrás que incluir el conjunto de Academicons.
Luego de descargar el ZIP de la página, subís las carpetas
/css/y/fonts/a la carpeta del tema hijo. Abrís el archivofunctions.phpy pegás el siguiente código:function zerifchild_ai() { wp_enqueue_style( 'zerifchild_ai', get_stylesheet_directory_uri() . '/css/academicons.css' ); } add_action( 'wp_enqueue_scripts', 'zerifchild_ai' );Por último, abrís el archivo
footer.phpy pegás lo siguiente:<script type="text/javascript"> jQuery(document).ready(function($) { $('.team-member .fa.fa-behance').addClass('ai ai-researchgate').removeClass('fa fa-behance'); }); </script>Este ejemplo es para reemplazar el icono de Behance. Si necesitás reemplazar otro, usá el código de Font Awesome que corresponda.
Saludos.
Buenas quisiera preguntarte porque no me deja eliminar los iconos de redes sociales, les elimino el # y no me guarda los cambios. Igualmente sucede con los botones rojo y verde. Te agradecería tu colaboración.
Hola, Natalia.
Fijate que estés usando la última versión del tema (1.8.4.4). Y también revisá que no haya algún plugin que esté generando errores o conflictos (desactivalos y probá activando uno por uno).
Saludos.
saludos, excelente trabajo.
Estoy intentando agregar una nueva sección y todo va bien excepto, que los íconos de Font Awesome no se pueden visualizar, te agradecería mucho la ayuda, por cierto tengo la última versión del Theme
Hola, Pedro.
Gracias por tu comentario.
Si pudieras detallarme un poco más el error, como decirme en qué parte no aparecen los iconos. ¿Se ven los de los miembros del equipo y los predeterminados del pie de página? Y si pudieras incluir un enlace, mejor.
Saludos.
Hola, quisiera conocer cómo pudiera incluir los botones de las redes sociales pero en las entradas, es posible? Agradecido por su ayuda
Hola, Rafael.
Sí es posible, pero esto ya no depende del tema, sino de un plugin. Podés buscar alguno en el repositorio de WordPress con la etiqueta social share.
Espero que te sirva.
Saludos.
Hola muy buenas, muchísimas felicidades por el tutoríal, la verdad es que soy novato en esto de wordpress y gracias a estos tutoriales estoy aprendendiendo de forma sencilla y rápida. En cuanto a este tutorial, lo he seguido al pie de la letra y el icono de youtube me sale en el pie de pagina, pero en las opciones generales-footer social icons no me sale su celda correspondiente para poner el enlace. ¿Puedes decirme que he podido hacer mal y corregirlo?, muchas gracias.
Hola, Rubén.
Gracias por tu comentario.
En este caso, tanto el icono como el enlace se agregan directamente en el archivo del tema hijo, por eso no tienen opciones en el Personalizador. Para editar el enlace, agregalo en lugar del símbolo
#que aparece en el código.Espero que te sirva.
Saludos.
Perfecto, muchísimas gracias!!!
Despues de crear dos paginas en wordpress.com, acabo de aterrizar a wp.org, y me encuentro con este diseño que puede encajar para mi sitio.
Pero tengo problemas muy basicos. Me gustaria saber como puedo crear un menu, que enlace con las principales secciones de la pagina. Lo he visto en la demo, pero no me viene por defecto, y no se como hacerlo
Hola, Aritz.
En el tutorial de Zerif Lite, sección Configurar el menú están las instrucciones para agregar los enlaces a las secciones de la página.
Saludos.
Buenos días, que buen tutorial, me ha sido de mucha ayuda.
Tengo una preguntita, quisiera cambiar “Zerif Lite funciona con WordPress” por un texto que no tenga ningún enlace que al clickear me dirija a algún sitio… “Redes sociales” por ejemplo. Como podría hacerlo? que código se usaría?
Hola, Mariángel.
Gracias por tu comentario.
En ese caso, deberías reemplazar la línea:
echo '<div class="zerif-copyright-box"><a class="zerif-copyright" href="https://wordpress.org/themes/zerif-lite/"'.$attribut_new_tab.' rel="nofollow">Zerif Lite </a>'.__('powered by','zerif-lite').'<a class="zerif-copyright" href="http://wordpress.org/"'.$attribut_new_tab.' rel="nofollow"> WordPress</a></div>';Por:
Espero que te sirva.
Saludos.
EXCELENTE! me funciono perfectamente.
Gracias.
no logro ubicar esa linea en donde esta la linea “Zerif Lite funciona con WordPress” …en el editor no logro dar con ello…me puedes orientar mejor, por favor?
Hola, Víctor.
Cualquier editor de texto que uses tiene la herramienta buscar (por lo general, Ctrl + F). La línea es la que comienza con
echo '<div class="zerif-copyright-box">.Saludos.
Buenos Dias, muchas gracias por los tutoriales son de muchisima utilidad!!
Tengo una consulta: En el tema Zerif seccion OUR TEAM, los logos de las redes sociales no me aparecen en la pagina web terminada (aparecen cuadraditos como si no estuviera la imagen), pero si los veo en la previsualizacion del editor web. Tenes idea como poder solucionarlo? Desde ya muchas gracias!!! Nahuel
Hola, Nahuel.
Gracias por tu comentario. Fijate limpiando cookies e historial del navegador o si usás algún plugin de caché, vaciándola. No sabría decirte exactamente qué hacer sin verlo, así que si podés pasarme la URL, mejor.
Saludos.
Estimada, muchas gracias por tu respuesta! Lamentablemente vacie cookies, historial, cache y temporales y siguen sin aparecer los logos, tanto en chrome como IE, e incluso en mi telefono movil. La pagina en cuestion es www.wbgroup.com.ar
Si se le ocurre algo le estaré más que agradecido! Un saludo y a sus ordenes.
De nada 🙂
Más que seguro es porque los archivos del sitio están alojados en un subdominio distinto. Fijate que si entrás en http://wbgroup.esy.es/ se ven perfectamente. ¿Es posible que hayas creado el sitio en el subdominio y luego apuntado el dominio? En ese caso, deberías entrar en phpMyAdmin y en la base de datos de WP actualizar todas las instancias de la URL
http://wbgroup.esy.es/porhttp://www.wbgroup.com.ar/. Si necesitás ayuda con esto, contactame.Saludos.
Es verdad!!! Funciona en la pagina del hosting, pero no con el .com.ar
Si modifico ese archivo phpMyadmin no hay riesgo de romper todo? Otra consulta, debo modificar solo las entradas de la pagina
http://wbgroup.esy.es/o las que tienen subpaginas tambien? Ej:http://wbgroup.esy.es/wp-content/uploads/2016/04/..., etc.Desde ya mil gracias por tu ayuda!!
Buenas tardes gracias por el tutorial, ha funcionado de maravilla.
Me podrías ayudar?. Lo que pasa es que quiero eliminar iconos de redes sociales y agregar alguno en la sección de nuestro equipo pero no encuentro como. Gracias
Hola, Sebastián.
Gracias por tu comentario. Para no mostrar determinados iconos de redes sociales (tanto en el pie de página como en los miembros de equipo), basta con dejar en blanco el campo correspondiente (de manera predeterminada, contienen un
#; hay que borrarlo). Y en cuanto a agregar nuevos en los miembros de equipo, este es el tutorial.Espero que te sirva.
Saludos.
Buenas noches, Gabriel de nuevo, maravillado con este gran tema, y muy agradecido de la amable ayuda que das a los novatos como yo; espero estés bien; podrías ilustrarme en como se puede cambiar el ancho de la sección del footer content.
Gracias por tu atención.
Hola, Gabriel. Probá con el siguiente código:
#footer .container { width: 100%; }El valor de
widthpuede ser un porcentaje o un número enpx.Espero que te sirva.
Saludos.
Gracias, vi como funciona, pero me exprese mal, no era el ancho, sino el alto.
Saludos
Bueno, en ese caso, el código es:
.company-details, .copyright { padding-top: 20px; padding-bottom: 20px; }Ajustá el valor
20pxal que necesites.Gracias, funciona de maravillas
Buenos días. Lo primero felicidades por los tutoriales. Sin duda ayudaran a mucha gente.
He realizado este y todo ha salido ok. La única cosa que no acaba de cuadrar es el icono de G+. He copiado el código de la página que facilitas y me sale, pero me sale el antiguo.
Es decir sale g+ en vez del nuevo G+ que se supone que debería de salir.
Puedo solucionarlo de algún modo.
Muchas gracias.
Hola, Javier.
Gracias por tu comentario y me alegro de que te haya servido este tutorial.
En efecto, el icono de G+ que se muestra es el viejo, ya que Zerif Lite incluye una versión anterior de Font Awesome. Pero todo tiene solución 🙂
En el archivo
functions.phpdel tema hijo pegá el siguiente código:function zerifchild_dequeue_style() { wp_dequeue_style( 'zerif_fontawesome' ); wp_deregister_style( 'zerif_fontawesome' ); } add_action( 'wp_print_styles', 'zerifchild_dequeue_style', 100 ); function zerifchild_scripts() { wp_enqueue_style( 'zerifchild_fontawesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' ); wp_enqueue_style( 'zerifchild_pixeden_style', get_template_directory_uri() . '/css/pixeden-icons.css' ); } add_action( 'wp_enqueue_scripts', 'zerifchild_scripts' );Con esto se cargará la hoja de estilos de Font Awesome en su última versión (que incluye el icono de G+ actual).
Espero que te sirva.
Saludos.
Efectivamente así cambia el icono, pero no sé si es porque hay que retocar el código según el tema hijo que utilizo, también cambian muchas otras cosas.
Uso ResponsiveBoat.
P.D. ¿Hay un número máximo de iconos que se pueden añadir?. He añadido dos y aparentemente no me deja añadir más.
Muchas gracias por la respuesta.
Claro, ResponsiveBoat es un tema hijo de Zerif Lite: usa su estructura, pero tiene estilos diferentes.
No debería haber límite para los iconos. Fijate que estés agregando el código como se indica en esta entrada y no afuera del cierre de la etiqueta
<ul>. (Ahí la corregí con el nuevo código; en una de las últimas actualizaciones, incluyeron el icono de Instagram, que ahora quedó a continuación del de Dribbble).