html - etiquetas - Iconos semánticos de la interfaz de usuario-fuente no cargando
title css (4)
Estoy construyendo un sitio web utilizando el marco semántico de la interfaz de usuario CSS, y ahora quiero usar algunos de sus iconos.
Aquí está el HTML:
<h1>Title<i class="lab icon"></i></h1>
He vinculado el semantic.css, pero supongo que debo hacer algo más para que los iconos funcionen. Intenté enlazar esto también:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Pero todavía no funciona. ¿Qué me estoy perdiendo?
Excavar en el archivo CSS semántico revela que las fuentes deben ubicarse aquí (en relación con su semantic.css): themes/default/assets/fonts/
Fuente: https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467
Mi solución fue bastante simple (una vez que la resolví). Había editado themes.config para usar mi nuevo tema (aún por construir). Como usted sabe, vuelve a la default por lo que todo parece funcionar bien.
/* Elements */
:
@flag : ''supernewtheme'';
@header : ''supernewtheme'';
@icon : ''supernewtheme'';
@image : ''supernewtheme'';
@input : ''supernewtheme'';
:
A pesar de que la consola mostraba la carga de fuentes de los iconos (no 404), iti no funcionaba. También verifiqué que la fuente estaba en mi carpeta de build en el lugar correcto, estaba.
Cambiar el tema de nuevo a default para @icon hizo el truco:
@icon : ''default'';
No es necesario que utilice una fuente impresionante de ninguna otra biblioteca. Pruebe primero https://cdnjs.com/libraries/semantic-ui Oficial https://cdnjs.com/libraries/semantic-ui
<link rel=''stylesheet prefetch'' href=''https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css''>
A veces esto no funciona, así que lo que puede hacer es ir a la página semántica de la interfaz de usuario. Descargue la carpeta zip de la interfaz de usuario semántica y extraiga en la carpeta de componentes que puede encontrar icon.min.css
incluir ese archivo en index.html
<link rel="stylesheet" href="icon.min.css">
Intenta mostrar esos íconos Documentos oficiales.
<i class="disabled users icon"></i>
DISFRUTAR
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel=''stylesheet prefetch'' href=''http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/css/semantic.min.css''>
<link rel=''stylesheet prefetch'' href=''https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/components/icon.min.css''>
</head>
<body>
<h1>Icon Example</h1>
<a class="item"><i class="alarm icon"></i>Notifications</a>
<a class="item"><i class="mail outline icon"></i>Messages</a>
</body>
</html>
Puedes intentar echar un vistazo al fragmento anterior. También puede utilizar el siguiente enlace para otros problemas similares: