{"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\/en\/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 icons, 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 custom 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 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 opties goed voor je font dowload.
      \nDe default waarden voor font name en prefix werken niet goed namelijk.<\/p>\n
        \n
      1. Aanpassen via tandwieltje
        \n\"\"<\/li>\n
      2. Font name\u00a0moet<\/strong> iets anders zijn dan icomoon
        \n\"\"<\/li>\n
      3. Prefix\u00a0moet\u00a0<\/strong>hetzelfde zijn als Font name
        \nEn\u00a0mag niet\u00a0<\/strong>icon- zijn.Voorbeeld:
        \nFont name: nudetuin
        \nPrefix: nudetuin-<\/li>\n<\/ol>\n<\/li>\n
      4. Upload niet Google Material icons 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. Check in Invision of het om een Google Material icon 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 icons toe aan een bestaande set<\/h2>\n
            \n
          1. Log in 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 icons de stappen van de belangrijke instructies die hierboven benoemd waren.<\/p>\n

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

            5. Vervolgens zal er een error in de console komen 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

            Icon font manager allows you to upload custom icon from Icomoon. ie select required icons from icomoon.io<\/a> and download the package. Then upload that zip file in The7 > Icon Manager (fig. 1):<\/p>\n

            \n

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

            Fig. 1. Icons Manager.<\/p>\n<\/div>\n

            Uploaded custom icons will be available in WP Bakery page builder icon selection field.<\/p>\n

            Also, if you don\u2019t have Font Awesome imported yet, the theme will offer you to install one (fig. 2):<\/p>\n

            \n

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

            Fig. 2. Install 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 icons, 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 fouten te voorkomen. Voor custom SVG’s verwijder altijd eerst de kleuren. Op die manier kan je vanuit VC element de…<\/p>\n","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\/en\/wp-json\/wp\/v2\/posts\/2260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/comments?post=2260"}],"version-history":[{"count":20,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2260\/revisions"}],"predecessor-version":[{"id":6739,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/posts\/2260\/revisions\/6739"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media\/2456"}],"wp:attachment":[{"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/media?parent=2260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/categories?post=2260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/the7kennisbank.nl\/en\/wp-json\/wp\/v2\/tags?post=2260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}