{"id":2260,"date":"2020-05-22T22:25:57","date_gmt":"2020-05-22T22:25:57","guid":{"rendered":"https:\/\/the7kennisbank.nl\/?p=2260"},"modified":"2021-01-07T17:19:43","modified_gmt":"2021-01-07T17:19:43","slug":"icon-manager","status":"publish","type":"post","link":"https:\/\/the7kennisbank.nl\/nl\/user-guide\/icon-manager\/","title":{"rendered":"Icon Manager (icomoon the7)"},"content":{"rendered":"
\n\t
\n\t\t
\n\t\t\t

Uitleg van Jaap hoe we werken met pictogrammen, SVG's, font awesome, Google Material Guide etc. kijk onderstaand filmpje eerst even als je hier nog niet bekend mee bent.<\/p>\n\n\t\t<\/div>\n\t<\/div>\n

\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t
<\/path><\/path><\/path><\/svg><\/div> <\/div> <\/div><\/div><\/div>\n\t
\n\t\t
\n\t\t\t

Belangrijke instucties<\/h2>\n

Volg onderstaande belagrijke instructies om fouten te voorkomen.<\/p>\n

    \n
  1. Voor aangepaste SVG's verwijder altijd eerst de kleuren.
    \nOp die manier kan je vanuit VC-element de kleur bepalen en aanpassen.<\/p>\n
      \n
    1. Kies een potloodje bovenin \"\"<\/li>\n
    2. Selecteer SVG icoon<\/li>\n
    3. Klik druppel \"\"<\/li>\n
    4. Haal kleur weg met druppel met kruis plaatje daaronder \"\"<\/li>\n<\/ol>\n<\/li>\n
    5. Zet de opties goed voor je font dowload.
      \nDe standaard waarden voor font name en prefix werken niet goed namelijk.<\/p>\n
        \n
      1. Aanpassen via tandwieltje
        \n\"\"<\/li>\n
      2. Lettertype naam\u00a0moet<\/strong> iets anders zijn dan icomoon
        \n\"\"<\/li>\n
      3. Voorvoegsel\u00a0moet\u00a0<\/strong>hetzelfde zijn als naam lettertype
        \nEn\u00a0mag niet\u00a0<\/strong>icon- zijn.Voorbeeld:
        \nLettertype: nudetuin
        \nVoorvoegsel: nudetuin-<\/li>\n<\/ol>\n<\/li>\n
      4. Upload niet Google Materi\u00eble pictogrammen vanuit Invision of vanuit Google zelf.
        \nDie iconen kan je rechtstreeks bij IcoMoon selecteren. Die hebben daaar een library voor.
        \nHetzelfde geldt voor Font Awesome.
        \nDoe je dat wel dan gaat het uploaden vaak niet goed en doe je overbodig werk.Instucties voor Invision icons.<\/p>\n
          \n
        1. Inchecken van het om een Google-materiaalpictogram gaat of niet door te klikken op het icoon.
          \n\"\"<\/a><\/li>\n
        2. Hier zie je dat het om een Google Material icon gaat en de naam ervan.
          \n          \"\"<\/a><\/li>\n
        3. Selecteer het icoontje dan rechtstreeks bij IcoMoon binnen de Google Material icons
          \n          \"\"<\/a><\/li>\n
        4. Bovenin kan je ook zoeken op de naam van het icoontje
          \n          \"\"<\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
          \n\t\t
          \n\t\t\t

          Voeg pictogrammen toe aan een bestaande set<\/h2>\n
            \n
          1. Inloggen op icomoon.io<\/a> met de gevens hieronder (alleen te zien wanneer ingelogd) of haal ze op https:\/\/jvhupdates.nl\/<\/a>.<\/li>\n<\/ol>\n\n\t\t<\/div>\n\t<\/div>\n\n\t
            \n\t\t
            \n\t\t\t

            2. Kies een bestaande set waar je icons aan wilt toevoegen.<\/p>\n

            \"\"<\/p>\n

            3. Volg voor het toevoegen van de pictogrammen de stappen van de belangrijke instructies die genoemd waren.<\/p>\n

            4. Verwijderen<\/strong> eerst de oude set met icons, voordat je de nieuwe upload en instelt.<\/p>\n

            5. Vervolgens er een fout in de console vanwege een bestand dat mist. Dit bestand wordt niet meegenomen uit het zipje en zal handmatig moeten worden geupload via FTP. Het bestand dat mist en de locatie is te zien in de console.<\/p>\n

            \"\"<\/p>\n\n\t\t<\/div>\n\t<\/div>\n

            <\/span><\/div><\/div><\/div><\/div><\/div>
            \n\t
            \n\t\t
            \n\t\t\t

            Met Icon Font Manager kunt u een aangepast pictogram uploaden vanuit Icomoon. dwz selecteer de vereiste pictogrammen van icomoon.io<\/a> en download het pakket. Upload dan dat zip-bestand in The7> Icon Manager (fig.1):<\/p>\n

            \n

            \"Afb.<\/a><\/p>\n

            Afb. 1. Pictogrammenbeheer.<\/p>\n<\/div>\n

            Ge\u00fcploade aangepaste pictogrammen zijn beschikbaar in het selectieveld van het WP Bakery-paginabuilderpictogram.<\/p>\n

            Als je Font Awesome nog niet hebt ge\u00efmporteerd, biedt het thema je ook de mogelijkheid om er een te installeren (afb.2):<\/p>\n

            \n

            \"Afb.<\/a><\/p>\n

            Afb. 2. Installeer Font Awesome.<\/p>\n<\/div>\n\n\t\t<\/div>\n\t<\/div>\n<\/div><\/div><\/div><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"

            Uitleg van Jaap hoe we werken met pictogrammen, SVG's, font awesome, Google Material Guide etc. kijk onderstaand filmpje eerst even als je hier nog niet bekend mee bent. Belangrijke instucties Volg onderstaande belagrijke instructies om te voorkomen. Voor aangepaste SVG's verwijder altijd eerst de kleuren. Op die manier kan je vanuit VC element de\u2026<\/p>","protected":false},"author":2,"featured_media":2456,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[12,9,28],"tags":[37,38,40,36,35,33,34,32,39],"class_list":["post-2260","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the7-dashboard","category-user-guide","category-videos","tag-font-awesome","tag-fontawesome","tag-google-icons","tag-icomoon","tag-icon-manager","tag-iconen","tag-iconmanager","tag-icons","tag-material-icons","category-12","category-9","category-28","description-off"],"acf":[],"_links":{"self":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/2260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/comments?post=2260"}],"version-history":[{"count":20,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/2260\/revisions"}],"predecessor-version":[{"id":6739,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/posts\/2260\/revisions\/6739"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/media\/2456"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/media?parent=2260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/categories?post=2260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/nl\/wp-json\/wp\/v2\/tags?post=2260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}