gonzocons 2.0
De ‘gonzocons 2.0’ is een custom icon font gemaakt voor persoonlijk gebruik op deze website en op mijn online portfolio. Via een aantal sociale media kanalen had ik al meerdere keren de vraag gekregen om deze icon set publiekelijk openbaar te maken. Hiervoor heb ik een demo website ontwikkeld, een statische website gebouwd op basis van HTML5 en CSS3.
@font-face
, een techniek die het mogelijk maakt om in CSS3 ondersteunende browsers lettertypes toe te voegen.Werkwijze:
Deze line icons zijn gemaakt in Adobe Illustrator en als .SVG files geïmporteerd in Icomoon. Deze icon set bevat 100 verschillende line icons. In deze icon set komen de meest voorkomende icoontjes voor, zoals icoontjes t.b.v. navigatie, bestandstypes, functies, sociale media netwerken, etc.
De demo website is gemaakt met behulp van CSS3 Flexible Box Layout Module (kortweg: CSS Flexbox). Doordat ik de verschillende elementen met een min-width heb gestyled zijn er ook geen Media-Queries nodig om deze demo site toch volledig responsive te krijgen.
Alle 100 line icons uit deze set zijn uiteraard te bekijken op de demo site, waar nog meer informatie te vinden is en waar deze icon set tevens gedownload kan worden. Dit icon font is ook te downloaden via Sellfy.com, waar deze al sinds september 2016 al meer dan 5000 keer is gedownload!
In de download file (gonzocons.zip) vind je o.a. het icon font in diverse web formaten (.ttf, .eot, .svg en .woff) bestemd voor de verschillende browsers, maar ook de codes voor de demo pagina en alle losse .SVG bestanden.
Licentie:
Dit gratis (open source) icon font is gelicenseerd en valt onder de ‘Creative Commons Attribution 3.0 Unported License’, dit houdt in dat de gonzocons voor zowel persoonlijk als commercieel gebruikt mogen worden.
Item: Icon Font geschikt voor website/app, op basis van @font-face
Webfont Formats: .eot, .ttf, .woff en .svg
Demo Website: HTML5 en CSS3
Responsive: Ja (website)
Bijzonderheden Website: geen Media Queries, CSS3 Flexbox, nadruk op SEO en performance.