Wie verwende ich die icons von Flaticon in mein html?

Ich möchte meiner website einige Symbole. Jetzt sehe ich, dass viele Menschen die Nutzung dieser website Flaticon.

Was ich gemacht habe, ist etwas wie dies in meinem CSS: 

/**    
 * Font 1    
 */    
@font-face {
  font-family: "Flaticon1";
  src: url("flaticon1.eot");
  src: url("flaticon1.eot#iefix") format("embedded-opentype"), url("flaticon1.woff") format("woff"), url("flaticon1.ttf") format("truetype"), url("flaticon1.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="flaticon1-"]:before,
[class*=" flaticon1-"]:before,
[class^="flaticon1-"]:after,
[class*=" flaticon1-"]:after {
  font-family: "Flaticon1";
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

.flaticon1-basic21:before {
  content: "\e000";
}

.flaticon1-bicycle21:before {
  content: "\e001";
}

.flaticon1-car6:before {
  content: "\e002";
}


/**    
 * Font 2    
 */    
@font-face {
  font-family: "Flaticon2";
  src: url("flaticon2.eot");
  src: url("flaticon2.eot#iefix") format("embedded-opentype"), url("flaticon2.woff") format("woff"), url("flaticon2.ttf") format("truetype"), url("flaticon2.svg") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="flaticon2-"]:before,
[class*=" flaticon2-"]:before,
[class^="flaticon2-"]:after,
[class*=" flaticon2-"]:after {
  font-family: "Flaticon2";
  font-size: 20px;
  font-style: normal;
  margin-left: 20px;
}

.flaticon2-basic21:before {
  content: "\e000";
}

.flaticon2-bicycle21:before {
  content: "\e001";
}

.flaticon2-car6:before {
  content: "\e002";
}

http://support.flaticon.com/hc/en-us/articles/205019862-CSS-code-for-Iconfont-

Ich heruntergeladen habe, die wollten Symbol, aber es wird nicht angezeigt das Symbol. Es zeigt dies:

Wie verwende ich die icons von Flaticon in mein html?

Was habe ich falsch gemacht?

  • Sie hatten wahrscheinlich nicht die font-Datei(en) korrekt in Ihrem Projekt. Siehst du einen Fehler in der Konsole? Was haben Sie für url() in der CSS-erwartet, dass die Symbol-schriftart-Datei in den gleichen Ordner wie die CSS-Datei.
  • Du hast Recht, was die Konsole sagt, ist, dass es Fehler beim laden der Ressource (ERR_FILE_NOT_FOUND). Ich habe icon-schriftart-Datei in den gleichen Ordner. Heißt das, dass ich mit dem Namen falsch?
  • Evtl. Tut den Dateinamen in url() Spiel CSS? Sind Sie eventuell fehlt eine schriftart-Datei-Typen? Sie müssen in der Regel mehr als eine Art haben, D. H. tff, woff, svg, funktionieren mit den meisten Browsern. Vielleicht sind Sie nicht und das ist, wo der Fehler ist.
  • Ich war das herunterladen von svg-Dateien, die anderen, die ich auswählen kann sind png, eps, psd und </>base 64. wenn ich will, zu bekommen, ttf-und woff-Dateien, muss ich die konvertieren oder ist das eine andere Art von format?
  • Was Sie heruntergeladen werden nicht von font-Dateien. Diese Dateiformate können Sie verwenden die Symbole als ein Bild. Ich bin mir nicht sicher, warum Sie, dass CSS - @font-face Beispiel, da Sie keine font-Dateien. Aus den Formaten, die Sie bieten, "PNG -, SVG -, EPS -, PSD-und BASE-64-Formaten," base 64 ist das einzige format, das Sie verwenden können, um Sie als Schrift.
  • Hey, ich habe das problem gelöst. Offenbar setzen Sie Symbole in Ihrer Sammlung, um in der Lage sein, um Sie herunterzuladen als Iconfont-oder SVG-sprite. Ziemlich komisch, dass Sie keine Anleitung oder tutorial auf. Es gibt eine weitere Sache, die ich stellen möchte. Die Symbole sind kleiner, als ich wollte. Wie mache ich Sie größer(zum Beispiel die Größe des div-Sie sind in)
  • Das ist seltsam. Froh, dass Sie es herausgefunden hat. Möchten Sie vielleicht hinzufügen, die als eine Antwort, auch wenn Sie sein würde, die Beantwortung Ihrer eigenen Frage. Könnte jemand anderes ein ähnliches Problem mit Flaticon.
  • Dies kann eine dumme Frage, aber wie markiere ich mein Kommentar als angenommen? Auch, wie bekomme ich die Symbole größer?
  • Werden Sie tatsächlich haben, um Ihre Frage zu beantworten. Sie können dann markieren Sie es akzeptiert (vielleicht warten müssen, bis X für die Zeit). So weit wie die Größe, dass ist eine andere Frage.

InformationsquelleAutor Boxman | 2017-04-25
  1. 1

    1. Bereiten Sie Ihre Sammlung

    Hinzufügen monocolor Symbole, um die Sammlung für Ihre Webseite

    2. Download iconfont

    Öffnen Sie Ihre Sammlung, und drücken Sie den Download-Kollektion klicken, dann wählen Sie Iconfont

    3. Bereiten Sie Ihre Sammlung

    Kopie der source-Dateien und CSS, um Ihre web-Ordner.

    4. Das stylesheet laden

    Wunsch ist der CSS-stylesheet aus dem head Ihrer Website.

    < link  type="text/css" href="your_website_domain/css_root/flaticon.css" >

    5. Verwenden Sie die Klassen

    Verwenden Sie die classes jedes Symbol und Sie erscheint auf Ihrer website. Nach dem Bearbeiten, können Sie mit CSS.
    Beispiel: 

    <i class="flaticon-airplane49"></i> or <span class="flaticon-airplane49"></span>
    InformationsquelleAutor Shahroze Ali
  2. 0

    Anscheinend habe ich heruntergeladen, Datei-Formate, schriftart-Dateien. Ich war nur in der Lage, download-Symbole entweder als Iconfont-oder SVG-sprite nach habe ich die Symbole in meiner Sammlung. Es lädt die ganze Sammlung natürlich.

    InformationsquelleAutor Boxman
  3. 0

    Laden Sie einfach das Symbol und setzen Sie diese in den Kopf:

    <link href="resources/filename"/>

    InformationsquelleAutor Jelle
Schreibe einen Kommentar