Ankündigung

Einklappen
Keine Ankündigung bisher.

eigene icons Font Awesome hinzufügen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • eigene icons Font Awesome hinzufügen

    Hallo,

    bin noch ganz neu im HTML/CSS Bereich und hoffe die Frage richtig stellen zu können.

    ich verwende ein Bootstrap template was wohl eine Art von Font Awsome Icons benutzt.

    Da ich eigene Icons benötige die ich fast nirgends finde (z.B. für Aquarien/Pflanzen) muss ich mir irgendwelche Icons selber basteln bzw. aus gifs oder jpegs Formaten und Icons aus dem Netz, müsste ich diese dann dem CSS von Bootstrap hinzufügen.

    Ich vermute das diese Art wie Bootstrap oder andere CSS Frameworks Icons nutzt irgendwelche Layer in bestimmten Bildformaten sind.

    ich habe da leider keine Ahnung da im CSS nur auf Contents verwiesen wird.

    kann mir das jemand ein wenig erklären bzw. weiss jemand wo es ein Tool gibt was einfach zu bedienen ist um Icons dem Framework hinzufügen zu können?

    Grüße Jürgen


  • #2
    Das sind icon fonts. https://icomoon.io/app/#/select Mit dem Service kannst du einen eigenen iconfont erzeugen.

    Wenn du damit nicht zurecht kommst, arbeite einfach mit einem icon sprite, das css kannst du dir bspw. durch glue erzeugen lassen (nur eines von vielen tools).
    I like cooking my family and my pets.
    Use commas. Don't be a psycho.
    Blog - CoverflowJS

    Kommentar


    • #3
      Hallo,
      kannst Du mir das bitte etwas näher erklären?
      wie muss ich mir das vorstellen?

      Muss ich da ein Icon erstmal erstellen, dann hochladen und dann wird mir ein Icon-Font erstellt?
      was passiert dann mit dem Icon also mit dem GIF? benötige ich das dann gar nicht mehr?

      Ich habe ein Problem zu verstehen wie das vor sich geht, also ohne das ein Image bzw. ein Bild existiert dass dann ein Icon irgendwie erstellt wird

      Grüße Jürgen

      Kommentar


      • #4
        Muss ich da ein Icon erstmal erstellen, dann hochladen und dann wird mir ein Icon-Font erstellt?
        Dafür musst du SVGs erstellen und hochladen. Den Iconfont am Ende runterladen, einbinden und benutzen. Die Anzeigegröße und die Farbe kannste am Ende über css font-size und color bestimmen. In Unicode-Fonts gibt es Namensräume, die für Benutzer reserviert sind. Dort werden die Vektorgrafiken angelegt. Damit die Icons nicht verwischen, solltest du sie am besten so skalieren, dass keine Rundungsungenauigkeiten auftreten (bspw. Originialgröße, x2, x4 ..).
        http://asimpleframe.com/writing/cust...torial-icomoon

        Wenn du Bilder verwenden willst, beschäftige dich mal mit Icon sprites. Anstelle von gifs solltest du pngs verwenden (8-bit).
        Grunt tools:
        https://www.npmjs.com/package/grunt-glue
        https://github.com/Ensighten/grunt-spritesmith
        https://github.com/jkphl/grunt-iconizr

        Mein aktueller Favorit:
        http://www.filamentgroup.com/lab/grunticon.html

        Grüße

        Basti
        I like cooking my family and my pets.
        Use commas. Don't be a psycho.
        Blog - CoverflowJS

        Kommentar

        Lädt...
        X