Tag Archives: Icons

FontAwesome Iconen gebruiken in Office 2016

Sinds kort kan je in Office 2016 ook met zogenaamde SVG afbeeldingen werken. Dit zijn geen afbeeldingen met pixels zoals foto’s maar bestaan uit lijnen en geometrische figuren. Deze worden veel gebruikt voor icoontjes. Een voordeel is dat je ze kunt vergroten zonder dat het er wazig uitziet. Een veel gebruikte set van iconen is FontAwesome. Als je ze eenmaal kent zie je ze overal, ze zijn vrij te gebruiken.

Als je ze wilt gebruiken in Office kan dat op 2 manieren:

  • Installeer het als een lettertype: na het downloaden met je even het ttf bestandje aanklikken in Windows. Vervolgens kun je in Word of Powerpoint met “Invoegen” en “Symbolen” de iconen gebruiken. Vergroten is dan een kwestie van het lettertype vergroten.
  • Als SVG afbeeldingen: deze zijn hier te vinden. Het gaat om enorm veel bestanden omdat in de zip de honderden iconen zich ook als normale afbeeldingen (*.png) bevinden, steeds op verschillende grootte. Pak anders alleen de SVG uit.

Als je aan het bestandje niet ziet wat het is, bekijk de iconen dan op de FontAwesome site of installeer een tekenpakket wat SVG kan openen. Tip: Inkscape.

Een iconen bibliotheek voor SharePoint aanleggen met FontAwesome

tegelsoffice365voorbeeld

Binnen onze organisatie gebruiken we Office365 voor samenwerking in de brede betekenis. Één van de navigatiehulpmiddelen is het aanbieden van zogenaamde ‘Tegels’. Dit zijn veredelde linkjes naar bijvoorbeeld subsites, bibliotheken, lijsten, views of externe sites etc. Deze lijst met linkjes ontstaat niet heel intelligent automatisch, zoals de nieuwe portalpagina met aanbevolen sites enzo., je moet ze handmatig aanleggen.

De app hiervoor heet “Aanbevolen Koppelingen”. Deze is aantrekkelijk omdat je tegeltjes krijgt waarop je afbeeldingen kunt plaatsen. Als je muis er overheen beweegt, schuift er toelichtende tekst in beeld. Nu leidt dat al snel, zoals wel vaker in Office365, tot een diversiteit in stijlen. De tegelwerking is standaard, maar de afbeeldingen worden door iedereen overal vandaan geplukt.

Nu gaan we dat niet technisch proberen dicht te timmeren, wat overigens steeds minder vaak kan in Office365. Wel willen iets aanbieden: iedereen die een beetje consistente afbeeldingen zoekt voor linkjes, kan terecht in een centrale iconen bibliotheek.

Dat werkt als volgt op hoofdlijnen, even geen handleiding-detail-niveau nu 😉

  • Kies een logische openbare site voor je iconen, bijvoorbeeld de root-sitecollectie. Bij ons is deze gedeeld met “Medewerkers”, aangezien we deze als securitygroep hebben. Je kunt ook delen met “Iedereen” natuurlijk.
  • Maak binnen die site een afbeeldingenbibliotheek aan.
  • Zoek op internet naar rechtenvrije iconen. We gebruiken zelf FontAwesome, aangezien deze van zichzelf al een bekende consistente vormentaal kent.
  • Downloaden van FontAwesome geeft je een lettertype bestand. Deze zou je kunnen gebruiken in bijvoorbeeld PowerPoint of in andere tekensoftware om afbeeldingen te maken. Dat is redelijk omslachtig: invoegen tekstvak, invoegen symbool, uitlijnen en opslaan etc. Sneller kan het met de fa2png website. Zoek de naam van het icoon, type deze in en druk op “Generate”. PNG bestanden kennen transparante achtergronden. Dit is later belangrijk omdat de stijl van je teamsite er dan ‘doorheen’ schijnt.
  • Upload deze *.png naar je iconen-bibliotheek. Nu zijn witte iconen op een transparante achtergrond niet zo lekker zichtbaar in de Verkenner, maar in een afbeeldingenbibliotheek wel.
  • De URL van een icoon kan gebruikt worden bij een tegel als bron voor de afbeelding. Om deze te krijgen beweeg dan met je muis over een icoon en wacht tot het pop-up venster komt. Selecteer en kopieer deze.
  • Bij de instellingen van de tegel plak je deze URL als bron van “Locatie van achtergrondafbeelding”.