2016-07-12 12 views
0

Ich habe Metronic Admin Theme Panel verwendet. Ich habe dafür drei Skripte genannt. HTML-Code für das Symbol ist <i class="icon-home"></i>Symbole, die als Quadrate angezeigt werden

Script

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css" /> 

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 

<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.3.2/css/simple-line-icons.css" rel="stylesheet" type="text/css"> 

Aber Symbol als Quadrate auftauchen.

enter image description here

HTML-Code

<li <?php echo ($module == 'dashboard') ? 'class="nav-item active"' : ''; ?>> 
    <a href="include.php?page=d-dashboard" class="nav-link nav-toggle"> 
     <i class="icon-home"></i> 
     <span class="title">Dashboard</span> 
     <span class="selected"></span> 
     <span class="arrow"></span> 
    </a> 
</li> 

Above Skript auf Schrift funktioniert, aber funktioniert nicht auf das Symbol.

Einfache Linie Symbol URL: http://keenthemes.com/preview/metronic/theme/admin_1/ui_icons.html

Einfache Linie Symbol arbeitet nicht über HTML-Code.

+0

Versuchen Sie, indem Sie Ihren Browser neu starten. – w3debugger

+2

Bitte zeigen Sie uns ein Beispiel für den HTML-Code, mit dem Sie die Symbole platziert haben. – Lowkase

+0

Es gibt keine Möglichkeit, wir könnten nur mit diesem Code wissen, was es falsch ist .... scheint wie die Schriftart oder img für die Symbole nicht geladen .. so – DaniP

Antwort

1

Ich habe mein Kommentar in einer Antwort gemacht ...

Sie haben vergessen, die font-awesome "fa" Klasse vor dem Symbol-Klasse. Beispiel:

<i class="fa fa-home"></i>

Spickzettel für font genial hier: http://fontawesome.io/cheatsheet/ alle anderen Klassen für alle Symbole zu sehen.

+0

Einfache Liniensymbole erfordern kein 'fa' Präfix. –

+0

Ja, aber die font awesome Symbole tun. Haben Sie eine URL, die wir uns ansehen können? –

+0

Danke, mein Herr! Es funktioniert perfekt. –

0

Beide funktionieren gut. Können Sie uns bitte den vollständigen Live-Code geben?

<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet" type="text/css"> 
 
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.3.2/css/simple-line-icons.css" rel="stylesheet" type="text/css"> 
 

 
<p>Font awesome <i class="fa fa-trash"></i></p> 
 
<p>Simple Line Icons <i class="icon-call-out icons"></i></p>

+0

Ist das nicht mehr ein Kommentar als eine Antwort? –

+0

Ich möchte ihm nur ein funktionierendes Beispiel zeigen, vielleicht kann er sich selbst korrigieren, wenn etwas mit seinem Code nicht stimmt. FYI, ich kommentiere auch dort. – w3debugger

Verwandte Themen