1
<i class="huge icons">
  <i class="Facebook icon"></i>
  <i class="google plus circle icon"></i>
  <i class="twitter icon"></i>
  <i class="disabled linkedin icon"></i>
  <i class="add icon"></i>
  <i class="add sign icon"></i>
  <i class="add sign box icon"></i>
</i>

Estoy empezando a usar Semantic UI coloco este fragmento en una parte de la página y no sale nada... En el head tengo correctamente definido lo siguiente

<script src="js/jquery.min.js"></script>
<script src="js/semantic.js"></script>
<link rel="stylesheet" href="css/semantic.css" >

digo "correctamente" porque lo uso con otros controles y va todo perfecto... Alguien que pueda decirme qué es lo que estoy haciendo mal ?

7
  • ¿Has comprobado que la ruta es correcta? Me refiero, ¿que el CSS está en una carpeta css al mismo nivel que tu fichero html? el 14 jun. 2017 a las 20:37
  • Todo lo demás funciona perfectamente. De hecho dónde deberían mostrarse los iconos aparece vacío
    – MNibor
    el 14 jun. 2017 a las 20:56
  • Si La ruta fuera incorrecta no vería nada de lo otro
    – MNibor
    el 14 jun. 2017 a las 20:57
  • Sí, era simplemente por asegurar. Muchas veces las librerías tienen subcarpetas y es muy fácil equivocarse. En principio no veo nada raro en tu código. ¿Podrías agregar un ejemplo reproducible? el 14 jun. 2017 a las 20:58
  • Tienes los ficheros de fuentes en la ruta themes/default/assets/fonts/ relativa a tu fichero semantic.css? el 14 jun. 2017 a las 21:04

1 respuesta 1

1

Lo que yo veo es que estás aplicando mal la sintaxis para agrupar íconos, si todo lo que quieres es mostrarlos uno al lado del otro, debes aplicar la clase huge a cada ícono (por cierto "facebook" debe ir en minúscula).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css" rel="stylesheet"/>
<div>
  <i class="huge facebook icon"></i>
  <i class="huge google plus circle icon"></i>
  <i class="huge twitter icon"></i>
  <i class="disabled linkedin icon"></i>
  <i class="add icon"></i>
  <i class="add sign icon"></i>
  <i class="add sign box icon"></i>
</div>

La clase huge icons es para sobreponer íconos, tal y como lo muestra el ejemplo de la documentación:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.css" rel="stylesheet"/>
<i class="huge icons">
  <i class="big red dont icon"></i>
  <i class="black user icon"></i>
</i>

3
  • Ah ok ahora en un rato pruebo
    – MNibor
    el 14 jun. 2017 a las 22:39
  • Shaz, estuve viendo que agregando solamente el "huge" seguia sin mostrarme nada entonces vi que las diferencias entre el codigo que pusiste y el mío eran las referencias a los archivos css y js de semantic... vi que pusiste un link a los repositorios mientras yo los tengo en una carpeta css en el servidor... puede que me falte algun componente ? Yo descargue el zip de semantic y leí por ahi que solamente recuperando el css y el js alcanzaba. Vi que hay un directorio también y por ahi no estoy copiando toda la estructura del directorio...
    – MNibor
    el 15 jun. 2017 a las 12:08
  • COPIE LA CARPETA THEMES dentro de la carpeta css donde tengo el css de semantic y funcionó perfecto apuntando al css local de semantic !!! muchas gracias Shaz !!!
    – MNibor
    el 15 jun. 2017 a las 12:18

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.