<i class="li_note"></i>

PinVa #1 May '14

Me han dado una pagina como plantilla y copio y pego y no me funcionan los iconos pequeños que todos son del estilo a esto:

<i class="li_algo"></i>

Y no consigo que aparezcan los iconos es como si no me los cogiera.

No se si es algun css de boostrap o algo, pero tengo todos los CSS importados.

Edit:

También tengo esto:

<a href="https://googleplus.com/" class="social-googleplus"></a>
<a href="https://twitter.com/" class="social-twitter"></a>

Y debería aparecer una imagen de twitter y otra de google plus, y no me aparecen y no se si class="social-twitter" es tambien de un CSS especial o uno a mano.

El caso es que tengo todos los CSS que hay en la pagina.

Esta es la pagina que me han dado para usar como plantilla, y estoy intentando hacer que funcione en mi wordpress con un template roots.

http://eventos.emagister.com/symposium

Los li_note etc, también son de esta pagina.

Las partes de mi pagina:

Las partes del template (Pagina anterior pero seccionada)

Como se ve mi pagina vs como se debería de ver:

Home: (el nav se ve en horizontal en vez de vertical)

web
mi web

Caracteristicas: (falla los li_etc)

web
mi web

Quien lo usa y casos de exito: (el tamaño y los margenes del CSS las imagenes se lo pasa por el forro)
web
mi web

Footer follow google y twitter:

web
mi web

Tunnecino #2 May '14

Sin ver el código fuente de tu página me parece a mi que poco vamos a poder ayudarte con fotos.

1 respuesta

PinVa #3 May '14

#2 Codigofuente en chrome

Tan solo tenias que ver el codigo fuente de la pagina que pase, lo tengo igual pero no se de donde salen los li_taltal

Porque no se si eso es de los CSS o no se que es eso, y en internet utilizan lo mismo pero no dice de donde lo sacan.

Tunnecino #4 May '14

No me vale la página que estás copiando, necesito ver la que falla, para ver por qué lo hace. Además, no entiendo lo del theme de wordpress, si estás haciendo la otra.

Edit: Vale, veo que el theme es una base. Pero necesitamos ver que errores escupe la tuya.

1 respuesta

zul0 #5 May '14

con las developer tools de cualquier navegador podrás ver que estilos se le aplican a cada elemento, tal vez estés sobreescribiendo ese estilo.

1 respuesta

PinVa #6 May '14

#4 #5 Las partes del template (Pagina anterior pero seccionada)

Es que no se a que te refieres con los errores, errores no me sale ninguno simplemente que no se ve igual.

No se a que te refieres con developer tools ver los estilos.

Perdonar mi incompetencia

A lo mejor como he tenido que ir copiando a mano los ficheros css y js los he copiado mal o algo, hay alguna forma de descargarlos todos automaticamente o alguna manera que me asegure que todos los ficheros están tal cual en el servidor donde estén subidos?

1 respuesta

Tunnecino #7 May '14

#6

Por ej, en Chrome y Firefox: Control + Shift + J.

Tienes la consola, y puedes ver algo está fallando a la hora de llamar a algún recurso, por ejemplo.

2 respuestas

Vaclad #8 May '14

Para que te cargue los los estilos de iconos debes cargar el CSS de la fuente y los iconos. En la página de ejemplo sería este fichero:

http://eventos.emagister.com/css/lib/vendor/linecons.css

Y si te fijas en ese CSS carga una fuente, así que deberías copiarla también.

2 respuestas

DaRk-eXe #9 May '14

copiar copiar copiar copiar hola soy web developcopiar copiar copiar

PD: yo uso esto para iconos en bootstrap: http://fortawesome.github.io/Font-Awesome/

1 1 respuesta

PinVa #10 May '14

#7 Gracias! si aparecen algunos errores.

#8 En que linea o desde donde llaman a linecons.css?

#9 Entonces los guardas en un directorio y los vas llamando no?

Gracias a todos!

1 respuesta

DaRk-eXe #11 May '14

#10 no, en el <head> pones:

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

y no hace falta que pongas nada en ningun sitio

y ya en tu código pues vas poniendo

<span class="fa fa-lg fa-envelope">mail_to correo</span>

por ejemplo.

1 respuesta

PinVa #12 May '14

#8
#11
#7

Vale ahora con eso que me habeis dicho entre todos de utilizar el developer tools, lo de la boostrap y todo ya funciona.

Pero lo que me sigue sin funcionar es lo siguiente:

<!-- start: Row -->
				<div class="row-fluid">

				<div class="span12">

					<ul class="clients-list">
						<li><a href="http://eventum.upf.edu"><img src="/imgs/symposium/logos/upf.png" title="Universitat Pompeu Fabra" alt="Universitat Pompeu Fabra"></a></li>
						<li><a href="http://eventos.ucm.es"><img src="/imgs/symposium/logos/ucm.png" title="Universidad Complutense de Madrid" alt="Universidad Complutense de Madrid"></a></li>
						<li><a href="http://eventum.usal.es"><img src="/imgs/symposium/logos/usal.png" title="Universidad de Salamanca" alt="Universidad de Salamanca"></a></li>
						<li><a href="http://eventos.um.es"><img src="/imgs/symposium/logos/umu.png" title="Universidad de Murcia" alt="Universidad de Murcia"></a></li>
						<li><a href="http://eventos.crue.org"><img src="/imgs/symposium/logos/crue.png" title="Conferencia de Rectores de Universidades Españolas" alt="Conferencia de Rectores de Universidades Españolas"></a></li>
						<li><a href="http://events.urv.cat"><img src="/imgs/symposium/logos/urv.png" title="Universitat Rovira i Virgili" alt="Universitat Rovira i Virgili"></a></li>
						<li><a href="http://eventos.upsa.es"><img src="/imgs/symposium/logos/ups.png" title="Universidad Pontificia de Salamanca" alt="Universidad Pontificia de Salamanca"></a></li>
						<li><a href="http://eventos.enae.com"><img src="/imgs/symposium/logos/enae.png" title="Escuela de Negocios Internacional" alt="Escuela de Negocios Internacional"></a></li>
						<li><a href="http://eventos.unex.es"><img src="/imgs/symposium/logos/unex.png" title="Universidad de Extremadura" alt="Universidad de Extremadura"></a></li>
						<li><a href="http://eventos.ull.es"><img src="/imgs/symposium/logos/ull.png" title="Universidad de La Laguna" alt="Universidad de La Laguna"></a></li>
						<li><a href="http://eventos.upct.es"><img src="/imgs/symposium/logos/upc.png" title="Universidad Politécnica de Cartagena" alt="Universidad Politécnica de Cartagena"></a></li>
						<li><a href="http://eventos.ucam.edu"><img src="/imgs/symposium/logos/ucam.png" title="Universidad Católica San Antonio" alt="Universidad Católica San Antonio"></a></li>
						<li><a href="http://eventos.uclm.es"><img src="/imgs/symposium/logos/uclm.png" title="Universidad de Castilla~La Mancha" alt="Universidad de Castilla~La Mancha"></a></li>
						<li><a href="http://eventoseducacionyempleo.carm.es"><img src="/imgs/symposium/logos/murciaeduca.png" title="Murcia Educa" alt="Murcia Educa"></a></li>
						<li><a href="http://eventos.fgua.es"><img src="/imgs/symposium/logos/uah.png" title="Universidad de Alcalá" alt="Universidad de Alcalá"></a></li>
					</ul>

				</div>	

			</div>

Aquí hace referencia a esto a symposium.css

Y se ve como en las imágenes que he puesto antes en las imágenes Quien lo usa y casos de éxito

Ya no me da fallos casi la pagina:

Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) (index):303
Failed to load resource: the server responded with a status of 404 (Not Found) http://eventos.emagister.com/fonts/fontawesome-webfont-62877.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://eventos.emagister.com/wp-content/themes/roots/assets/lang/js/common+symposium/index
Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 1.5), not all, not all, not all, (min-resolution: 144dpi), (min-resolution: 1.5dppx) (index):1
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Failed to load resource: the server responded with a status of 404 (Not Found) http://eventos.emagister.com/wp-content/themes/roots/assets/css/lib/vendor/img/social-icons-set.png

1 respuesta

Tunnecino #13 May '14

#12 Pues creo que está bastante claro no? Estás intentando sacar las imágenes y fuentes directamente desde la web que estás robando. Tienes que bajar esos assets a la tuya.

1 respuesta

PinVa #14 May '14

#13 Ya tengo las imagenes en /imgs/etc/etc.

Si mostrarse se muestran:

Quien lo usa y casos de exito: (el tamaño y los margenes del CSS las imagenes se lo pasa por el forro)
web
mi web

Pero se muestran mal, muy grandes en vez de respetar los espacios etc.

Y como de eso no me da error en developers tools

1 respuesta

Tunnecino #15 May '14

#14 Por que te faltarán clases CSS, o es que la web original puede tener algún tipo de script para redimensionar imágenes, o vete tu a saber, es lo que pasa cuando uno hace estas cosas.

1 respuesta

PinVa #16 May '14

#15 Ya pero es lo que me han mandado, coger esa pagina y meterla en un wordpress

A demás supuestamente debería hacer este código:

ul.clients-list li:first-child {
    margin: 0 2.5% 2.5%;
}

ul.clients-list li {
    float: left;
    margin: 0 2.5% 2.5%;
    width: 20%;
}

<i class="li_note"></i>

Usuarios habituales

Tags