web-dev-qa-db-fra.com

Icônes de l'interface utilisateur sémantique - la police ne se charge pas

Je suis en train de créer un site Web en utilisant le framework CSS Semantic UI, et maintenant je veux utiliser certaines de ses icônes.

Voici le HTML:

<h1>Title<i class="lab icon"></i></h1>

J'ai lié le semantic.css, mais je suppose que je dois aussi faire autre chose pour que les icônes fonctionnent? J'ai aussi essayé de lier ceci:

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

Mais ça ne marche toujours pas. Qu'est-ce que je rate?

htmlcssfont-awesomesemantic-ui
17
fgblomqvist

Creuser dans le fichier CSS sémantique révèle que les polices doivent être situées ici (par rapport à votre semantic.css): themes/default/assets/fonts/

Source: https://github.com/Semantic-Org/Semantic-UI/blob/master/dist/semantic.css#L5466-5467

23
fgblomqvist
<!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>

vous pouvez essayer de consulter l'extrait ci-dessus. Vous pouvez également utiliser le lien ci-dessous pour d'autres problèmes similaires:

https://cdnjs.com/libraries/semantic-ui

11
David Charles

Vous n'avez pas besoin d'utiliser font-awesome d'une autre bibliothèque, essayez d'abord cdn Official icon.min.css

<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/components/icon.min.css'>

parfois, cela ne fonctionne pas, alors ce que vous pouvez faire est d'aller page officielle semantic-ui télécharger le dossier Zip ui sémantique et extraire dans le dossier des composants, vous pouvez trouver icon.min .css

inclure ce fichier dans index.html 

    <link rel="stylesheet" href="icon.min.css">

essayez d'afficher ces icône Documents officiels

<i class="disabled users icon"></i>

[~ # ~] profitez de [~ # ~]

3
MD SHAYON

si quelqu'un utilise électron ou tout autre framework JavaScript. Cela pourrait fonctionner pour vous. Les icônes dans l'électron après avoir correctement configuré la sémantique n'étaient pas affichées. L'erreur n'est ni en sémantique ni en chargement. L'erreur vient du photon et de la combinaison sémantique. J'ai utilisé le photon avec la sémantique pour rendre mon interface utilisateur superbe. La solution de base que j'ai choisie fait référence à ce rapport d'erreur officiel. Également dans mon icône d'interface utilisateur n'apparaissait pas pour une liste déroulante, j'ai donc utilisé la console pour résoudre comme

.myclass .icon:before, .myclass.icon-before {
    font-family: 'dropdown';
}

J'espère que ça aide.

0
Muhammad Hassaan Bin Tanveer

Ma solution était assez simple (une fois que je l'ai trouvée). J'avais édité themes.config pour utiliser mon nouveau thème (à construire). Comme vous le savez, cela revient à default donc tout semble fonctionner correctement.

/* Elements */
:
@flag       : 'supernewtheme';
@header     : 'supernewtheme';
@icon       : 'supernewtheme';
@image      : 'supernewtheme';
@input      : 'supernewtheme';
:

Même si la console montrait le chargement de la police des icônes (no 404), cela ne fonctionnait pas. J'ai également vérifié que la police se trouvait dans mon dossier build au bon endroit.

Changer le thème en default pour @icon a fait l'affaire:

@icon       : 'default';
0
Ed Henderson