Font Awesome

Beschrijving

De officiële manier om Font Awesome Free of Pro pictogrammen op je site te gebruiken, aangeboden door het Font Awesome team.

Functies

Our official plugin lets you use Font Awesome the way you want:

  • Gebruik Pro of Free iconen.
  • Leverage the latest release or a specific version of our icons.
  • Kies de technologie, SVG of Web Font.
  • Take your pick of loading your icons from our classic Font Awesome CDN, or use Font Awesome Kits – the easiest and most efficient way to use Font Awesome icons on the web.
  • Schakel automatische compatibiliteit in voor Font Awesome versie 4 als je – of je plugins – nog steeds de syntaxis van versie 4 gebruiken.
  • Problemen oplossen wanneer meerdere versies van Font Awesome op je site worden geladen vanuit andere plugins/thema’s, die onverwachte pictogramweergave of technische problemen kunnen veroorzaken.
  • Make things even awesomer using icons from Font Awesome Version 6.
  • Gebruik je geüploade pictogrammen uit je Pro Kits.

How to Use

Installeer en schakel de plugin in
(Zie het tabblad Installatie voor details)

Voeg pictogrammen toe aan je pagina’s en berichten
Pictogrammen toevoegen werkt zowel in de blokeditor als in de klassieke editor.

Once you’ve set up your plugin, you can search and add icons to your pages and posts by choosing the Font Awesome option in the format bar from any text block to open the Icon Chooser. (If you want to search and add Pro icons in the Icon Chooser, you’ll need to use a Pro Kit.)

Or you can use the icon names in shortcodes or HTML. When you use shortcodes, you add the name of the icon and a prefix, where the prefix is the style of icon you want to use. Note that you don’t need to include the fa- part of the name. And if you don’t include any prefix, the icon will default to the Solid style.

De shortcode voor een pictogram ziet er als volgt uit:

[icon name="stroopwafel"]

[icon name="stroopwafel" prefix="fal"]

Get the details on all the shortcode options in the Font Awesome WordPress docs.

Je kunt ook eenvoudige HTML gebruiken met standaard Font Awesome-syntaxis, zoals dit:

<i class="fas fa-stroopwafel"></i>

Using Pro Icons and Features
To use a Kit, create a Kit on FontAwesome.com and select “Pro icons” in the settings. Then grab your API Token from your Font Awesome account page to add into the WordPress Kit settings.

Om Pro pictogrammen met het CDN toe te voegen, moet je je domein toevoegen aan de lijst met toegestane domeinen op je Font Awesome account CDN instellingenpagina en gebruik shortcodes of HTML om de pictogrammen aan je inhoud toe te voegen.

If you’re using the Icon Chooser, you’ll need to use a Pro Kit. (The CDN can only search and add Free icons – use shortcodes or HTML to add Pro icons when using the CDN).

Problemen oplossen met de plugin
Font Awesome pictogrammen zijn populair, dus veel thema’s en plugins laden Font Awesome ook, en soms kan hun versie conflicteren met die van jou. Daarom hebben we een manier ontwikkeld om je te helpen bij het vinden en voorkomen dat conflicterende versies je pictogrammen beïnvloeden: De conflictdetectiescanner.

If the plugin seems to be set up correctly and your icons still aren’t loading and you’re not sure why, head over to the Troubleshoot tab, which has two parts:

  • Conflicten detecteren met andere versies van Font Awesome – waarmee je de scanner voor conflictdetectie kunt starten om versies van Font Awesome te vinden die op je site worden geladen.
  • Versies van Font Awesome actief op je site – die de resultaten van de scanner toont en waarmee je kunt voorkomen dat conflicterende versies andere versies van Font Awesome op je site laden.

Get more information about using the scanner for troubleshooting on the Font Awesome WordPress docs.

Configureren

De plugin is standaard ingesteld om Font Awesome Free pictogrammen als een weblettertype via het Font Awesome CDN te gebruiken. Je kunt de CDN instellingen rechtstreeks in de plugin wijzigen. Als je alleen de standaard gratis pictogrammen wilt, hoef je waarschijnlijk geen wijzigingen aan te brengen in de standaardconfiguratie.

Je kunt meer informatie krijgen over alle beschikbare instellingen en probleemoplossing in de Font Awesome WordPress-documenten.

Upgraden van de oude versies

If you used the old plugin or are still using Version 3 of Font Awesome, we’ve tried to smooth the upgrade path for you by keeping [icon] shortcode compatibility for Font Awesome 3 names used with the old plugin. But we plan to remove version 3 naming support from this plugin soon so don’t wait too long to update your code!

Bekijk ook

De README op GitHub heeft details voor WordPress site eigenaren en ontwikkelaars.

En er zijn API-documenten voor ontwikkelaars.

Schermafdrukken

  • Voeg pictogrammen toe in een tekstblok vanuit de bewerkingsbalk
  • Search and add icons from Font Awesome Free or Pro (with subscription)
  • Bekijk de pictogrammen in de voorbeeldmodus of in gepubliceerde pagina's en berichten
  • Gebruik een Font Awesome Kit om de pictogrammen van je site van stroom te voorzien
  • Or use the Font Awesome CDN
  • Detecteer en los problemen op met conflicterende versies van Font Awesome op je site
  • Voeg ook pictogrammen toe in de klassieke editor

Installatie

From the Plugins Directory in WordPress Admin

From the “Add Plugins” page in WordPress admin:

  1. Search the plugins directory by author: fontawesome

  2. Klik op “Installeren” op de Font Awesome plugin in de zoekresultaten

  3. Klik op “Activeren”

Installing a Zip Archive

  1. Klik op Downloaden in het folder item van deze plugin om het bestand .zip op te halen

  2. On the “Add Plugins” page in WordPress admin, click “Upload Plugin” and choose that .zip file

Toegang tot de Font Awesome plugin instellingen

Once you activate the Font Awesome plugin, you will see Font Awesome in the Settings menu in your WordPress admin area, or you can click “Settings” on the plugin listing on the Plugins page.

De plugin is standaard ingesteld om Font Awesome Free pictogrammen als een weblettertype via het Font Awesome CDN te gebruiken. Je kunt de CDN instellingen rechtstreeks in de plugin wijzigen. Als je alleen de standaard gratis pictogrammen wilt, hoef je waarschijnlijk geen wijzigingen aan te brengen in de standaardconfiguratie.

Pro pictogrammen en functies gebruiken
Om Pro pictogrammen met het CDN in te schakelen, moet je je domein toevoegen aan de lijst met toegestane domeinen op je pagina Font Awesome CDN instellingen. Om een kit te configureren, haal je jeAPI-token van je Font Awesome accountpagina.

Je kunt meer informatie krijgen over alle beschikbare instellingen en probleemoplossing in de Font Awesome WordPress-documenten.

FAQ

Je kunt meer informatie krijgen over het gebruik van de plugin, details voor beschikbare instellingen en antwoorden op veelgestelde vragen op de WordPress documenten op Font Awesome.

Beoordelingen

24 december 2023
コード書くのが面倒でこのプラグインを使っています。今後もノーコード感覚で使いやすいものを提供していただけると助かります。ありがとうございました。
20 februari 2023
Using the CDN or Kit option there's no difference, most of the 2,020 free icons found on fontawesome page by searching with the "Free" filter won't show at all, just a crossed out rectangle appears. Backward compatibility selected 6.x or 5.x, tried every combination and many many many many Free Icons, It's the official plugin guys... can't you do it rigth? Maybe your select and insert block friendly thing works. But some of us need to use the pseudo-element method. By the way thanks for the plugin...
4 februari 2023
For a free product this works quite well and allows users to quickly add font-awesome to their site without messing with custom code. If they offered a Pro version of this then it would definitely need to be cleaned up to work more easily on the editor side, however for a free piece of software its pretty nice and allows me to more easily integrate font-awesome into my sites. Thanks!
14 juli 2022
As soon as I enabled it the entire site was down - stuck with the browser trying to connect to fontawesome. not very awesome...
29 maart 2022
The Font Awesome plugin makes it easy to stay on top of the latest version that is otherwise hidden away in some assets folder. Block editor support makes it easy to insert icons without having to remember their names. Can't wait for version 6.
Lees alle 52 beoordelingen

Bijdragers & ontwikkelaars

“Font Awesome” is open source software. De volgende personen hebben bijgedragen aan deze plugin.

Bijdragers

“Font Awesome” is vertaald in 14 talen. Dank voor de vertalers voor hun bijdragen.

Vertaal “Font Awesome” naar jouw taal.

Interesse in ontwikkeling?

Bekijk de code, haal de SVN repository op, of abonneer je op het ontwikkellog via RSS.

Changelog

4.4.0

  • Update the Icon Chooser to fix the use of Sharp Solid in more recent versions of Font Awesome,
    and include Sharp Regular and Sharp Light.
  • Add the “defer” attribute to script tags when in “Use a Kit” mode. This was already the behavior
    under “Use CDN” mode.
  • Fix some deprecation notices for php 8.2.

4.3.2

  • Security Fix: escape shortcode attribute values.

4.3.1

  • Increase network request timeout to accommodate some slow-running Icon Chooser searches.
    We’ve recently added some new functionality to the Font Awesome API server. We’re in
    the process of optimizing it for performance. In the meantime, some icon searches that
    return lots of search results are running slowly. Increasing the timeout
    allows those searches to run longer before considering it an error.

4.3.0

  • Introduce support for Sharp Solid.
    The Icon Chooser now includes Sharp Solid among the available styles when using
    a Font Awesome Pro Kit.
  • Introduce support for WordPress multisite. Allows installing the plugin network-wide
    and configuring each site separately.
    Previous versions of this plugin were not compatible with multisite, though it was
    possible to install and get partial functionality on multisite. However, this
    could also result in a confusing database state. If you’re running multisite,
    it’s important that any installation of a previous plugin version is totally cleaned
    up before trying to install this version. Upgrading on multisite without cleaning up
    first will probably result in an error. A previous installation can usually be
    cleaned up by deactivating and uninstalling it. Uninstall must be done by clicking
    “Delete” on the deactivated plugin’s entry in the plugin list in the admin dashboard.
    It may also work to install the previous 4.2.0 version and then uninstall it, just
    to get its cleanup code to run.
    This has no impact on sites that are not running in multisite mode. If you’re not
    running multisite, upgrading to this version should be smooth and problem-free.

4.2.0

  • Make Font Awesome 6 the default version on new activations.
  • On the version selection dropdown, distinguish between the latest 5.x and the latest 6.x.
  • Maintenance updates to JavaScript dependencies.
  • Developers: the latest_version() method has been deprecated and replaced by two alternatives:
    latest_version_5() and latest_version_6().

4.1.1

  • Simplified upgrade logic: makes the upgrade process on the first page load
    after upgrade quicker and smoother.

4.1.0

  • Ondersteuning toegevoegd voor het gebruik van Font Awesome versie 6 gratis met CDN. Om te kunnen gebruiken
    Versie 6 Pro met deze plugin is het nog steeds nodig om een Kit te gebruiken,
    aangezien versie 6 Pro niet beschikbaar is op het klassieke CDN.
  • Renamed the “Version 4 Compatibility” option as “Older Version Compatibility”,
    since compatibility features may now involve both Version 4 and Version 5.
  • Geüpdatet versie van het script voor conflictdetectie dat wordt gebruikt bij configuratie voor CDN.
  • FIX: in some cases, when running the conflict detector on the back end,
    there was an error about an undefined variable called $should_enable_icon_chooser.
    Fixed.
  • FIX: in some cases, when running php 8.0 or higher, there was an error related to
    calling method_exists(). Fixed.
  • Ontwikkelaars: de methode v4_compatibility() is verouderd en wordt verwijderd
    in een toekomstige uitgave. Het is nu alleen compatibiliteit().
  • Ontwikkelaars: de voorkeur met de naam “v4Compat” in het array-argument naar de register()
    methode is verouderd en omgedoopt tot “compat”. Elk gebruik van “v4Compat” wordt automatisch
    vertaald naar “compat”.
  • Ontwikkelaars: er zijn geen belangrijke wijzigingen. Elke code die de bovenstaande verouderde gebruikt
    functies zullen in deze release hetzelfde blijven werken zonder aanpassingen.

4.0.4

  • FIX: add hash values to JavaScript chunk file names to resolve the problem where
    sometimes an old cached version of a JavaScript file would load in the browser
    instead of the intended updated one. This caused some users to see a blank
    settings page after upgrading from a previous version of the plugin.

4.0.3

  • FIX: When in the Classic Editor in WordPress 5, do not load block editor
    script dependencies that assign to the global wp.editor object.
    This prevents problems with other plugins on the page that may depend on that
    global.
  • FIX: When in the Classic Editor where multiple editor instances are present,
    ensure that the Add Font Awesome media button on each is wired up to
    load the Icon Chooser on click, not just those buttons that were on the page
    at the time this plugin’s initialization code is run.

4.0.2

  • FIX: re-enable the Icon Chooser in the Classic Editor on WordPress 4.
  • FIX: in some cases where the path to the plugin was a non-standard
    location–such as when installed via composer–the admin settings page and
    Icon Chooser would not load correctly. Fixed.
  • FIX: the global version of the lodash JavaScript library was again being overwritten
    by the version used by this plugin. Fixed.
  • The Icon Chooser’s integration with the Block Editor (Gutenberg) has been disabled
    for WordPress 5.0, 5.1, 5.2, and 5.3, due to incomptabile JavaScript libraries.
    All other features of the plugin work normally on those versions, including
    Icon Chooser integration with the Classic Editor.

4.0.1

  • FIX: In scenarios where both Gutenberg (Block) and TinyMCE (Classic)
    editors were being loaded onto the same page, the Gutenberg editor was not
    displaying properly.
    Now, in that multi-editor situation, the Icon Chooser integration is only enabled
    for the block editor.
    In those cases, you can still use icon shortcodes or HTML in
    the TinyMCE editor boxes; those editors just won’t have the “Add Font Awesome”
    media button for opening the Icon Chooser.
    The Icon Chooser is still available from the Classic Editor when the block editor
    is not present on the page.
  • FIX: In scenarios where there are multiple TinyMCE editor instances on the same page,
    such as WooCommerce product editing pages, only the “Add Font Awesome” media
    button on the first of those editors was working correctly. Now all of them work
    correctly.
  • FIX: In the Classic Editor, when other themes or plugins added media buttons after
    the “Add Font Awesome” button, those buttons were showing up as combined together
    and not working properly. Now they’re separated and working great.
  • The Icon Chooser integration for the Classic Editor in WordPress 4 has been temporarily
    disabled. Everything else works as before in WP4, just not the new Icon Chooser.

4.0.0

  • OFFICIAL 4.0.0 STABLE RELEASE
  • FEATURES: Includes all the features from the early 4.0.0 release candidates (details below)
  • FEATURE: Visual icon chooser lets you search and easily insert the correct shortcode.
  • Fixed regression on overriding global lodash version.
  • PHP API methode toegevoegd om het huidige Kit token te krijgen.
  • Removed the filter to process all shortcodes in widget text. This seems to have been
    an overly eager approach on our part. If you want shortcodes to be processed
    in widget text – all shortcodes, not just this plugin’s icon shortcode – you can
    add a line like this to your theme’s functions.php file:
    add_filter( 'widget_text', 'do_shortcode' );

4.0.0-rc23

  • FIX: plugin now handles Kits with version “5.x” or “6.x”

  • FEATURE: shortcode supports attributes: style, role, title, aria-hidden,
    aria-label, aria-labelledby

4.0.0-rc22

  • Metadata about available Font Awesome releases is now stored as a normal option
    in the WordPress database, instead of as a transient. Thus, it does not expire
    and does not disappear if the transient cache is purged.

    Dit is gedeeltelijk om het scenario te vermijden waarin een verzoek aan de Font Awesome API
    server kan nodig zijn om metadata te vernieuwen als reactie op het laden van een frontend-pagina
    wanneer die tijdelijke vervalt.

    Some site owners had occassionally experienced problems where a sudden burst of
    requests to the API server from many WordPress sites caused this plugin to fail
    when making a request with an error like ‘An unexpected response was received
    from the Font Awesome API server.’ This change means that it is significantly
    less likely that such a scenario will occur.
    (Additionally, changes have been made on the API server, also making it
    significantly less likely that this over-load failure will occur again.)

  • Developers: the refresh_releases() API method has been deprecated to discourage
    unnecessary blocking network requests to the API server.

4.0.0-rc21

  • optimize normal page loads by loading much less metadata from the database (GitHub #96)
  • move the Font Awesome settings link from the main admin nav menu back down under Settings, where it used to be
  • update de versie van het conflictdetectiescript naar een versie die ook conflicterende Kits detecteert
  • minor maintenance changes to keep JavaScript dependencies up to date
  • fix a bug involving the pseudo-elements setting when moving back and forth between using a Kit and using CDN (GitHub #82)

4.0.0-rc20

  • developer-oriented update to support building themes that use this code as a composer package

4.0.0-rc19

  • nog een kleine update met extra foutregistratie

4.0.0-rc18

  • minor update with additional error logging

4.0.0-rc17

BEVEILIGING: lost een kwetsbaarheid op in de manier waarop API tokens werden opgeslagen, wanneer geconfigureerd om een Kit te gebruiken. Alle gebruikers van 4.0.0-rc15 of 4.0.0-rc16 moeten onmiddellijk updaten. Vind meer details en instructies voor het bijwerken van uw API-token op de Font Awesome blog.

  • een kleine bug in de manier waarop netwerkfouten worden afgehandeld

4.0.0-rc16

  • Fixes to the upgrade process

4.0.0-rc15

BELANGRIJKE UPDATE, enkele belangrijke wijzigingen voor ontwikkelaars. Verbetert conflictdetectie, voegt ondersteuning toe voor Kits en internationalisering.

  • Includes auto-upgrade logic so that most users can upgrade with no impact, except those that have “registered client” themes or plugins. Users who had previously enabled the “remove unregistered clients” option should verify that the auto-upgrade worked successfully – check that your icons are appearing correctly. If not, run the Conflict Scanner from the Troubleshoot tab.
  • New conflict detection and resolution: The new conflict detection scanner can be enabled to more precisely discover conflicting versions of Font Awesome and provides more granular conflict resolution.
  • Expanded error handling with detailed reports in the web console for more advanced diagnostics.
  • Voegt ondersteuning toe voor Kits.
  • Voegt uitgebreide internationalisering toe in zowel PHP als JavaScript.
  • New design of the admin UI.
  • Ontwikkelaars: Aanzienlijke wijzigingen in de manier waarop de instellingen intern worden afgehandeld: Font Awesome wordt altijd geladen op de manier die de WordPress-beheerder kiest. Geregistreerde thema’s of plugins kunnen voorkeuren registreren (die worden weergegeven aan de beheerder), maar de sitebeheerder bepaalt de configuratie.
  • Ontwikkelaars: Geregistreerde client plugins en thema’s moeten worden bijgewerkt voordat ze werken zoals verwacht.
  • Ontwikkelaars: de PHP API bevat belangrijke wijzigingen. Zie de GitHub README voor een overzicht en de PHP API-documenten voor details. Deze release is bedoeld als een laatste API-veranderende release voordat de API wordt gestabiliseerd op 4.0.0. Zodra 4.0.0 is uitgebracht, zal het de best practices voor semantische versiebeheer volgen.

4.0.0-rc13

  • Improve diagnostic output for unhandled errors.

4.0.0-rc12

  • Bug fix: Fix loading of admin page assets when removal of unregistered clients is enabled. This bug has been
    hiding under a rock for a while. rc11 turned over the rock, and this bug scurried out.

4.0.0-rc11

  • Bugfix: Font Awesome middelen in de wachtrij plaatsen in admin- en login-gebieden, niet alleen in de front-end

4.0.0-rc10

  • Poging om een probleem op te lossen waarbij de beheerdersinstellingen soms worden verward door onverwachte uitvoer van WordPress
    server. Deze toestand is gemeld wanneer bepaalde andere plugins actief zijn, en (mogelijk) wanneer PHP uitvoer
    buffering werkt anders dan deze plugin verwacht.

4.0.0-rc9

  • Enhance Font Awesome version 4 compatibility: add shimming of the version 4 font-family to enable version 4
    icons defined as pseudo-elements to be rendered via the version of Font Awesome 5 loaded by this plugin.

  • Voeg waarschuwingen toe aan de beheerdersinterface om aan te geven dat het gebruik van svg en pseudo elementen kan leiden tot trage prestaties,
    en dat svg met pseudo elementen en compatibiliteit met versie 4 helemaal niet wordt ondersteund.

4.0.0-rc8

  • Remove dependence on third party libraries, eliminating a class of potential conflicts with other plugins.

  • Belangrijke wijzigingen in de API die wordt gebruikt door ontwikkelaars van thema’s en plugins (geen ingrijpende wijzigingen voor eigenaren van WordPress sites).
    Zie commit log

4.0.0-rc7

  • Fix detection and removal of unregistered clients by changing the internal resource name this plugin uses to enqueue its resource.
    Change it to something unlikely to be used by other themes or plugins.

4.0.0-rc6

  • Fix error when updating options on admin page: handle null releaseProviderStatus in cases where the release provider
    does not have to make a network request to update release metadata.

4.0.0-rc5

  • Remove tilde character from JavaScript filenames to avoid violating some URL security rules

4.0.0-rc4

  • Cache releases data in the WordPress database to reduce the number of server-side network requests.

  • Ensure that releases data are always loaded fresh from fontawesome.com when loading the admin
    settings page so site owners can see when new versions are available.

  • Voeg een meer specifiek foutbericht toe aan het beheerdersdashboard in het geval dat de WordPress server dit niet kan
    ga naar fontawsome.com om een eerste set beschikbare releasegegevens te krijgen.

4.0.0-rc3

  • Ontbrekend v3 shim bestand toevoegen

4.0.0-rc2

  • Fix handling of v3 deprecation warnings in admin settings page

4.0.0-rc1

  • Pagina met beheerdersinstellingen toevoegen
  • Lots of back end code changes to support theme and plugin developers
    • Package plugin as a composer dependency
    • API veranderingen
    • Comprehensive API documentation for developers
  • Cache laadspecificatie tenzij de eisen van de klant veranderen
  • Handle changing configurations as new plugins or themes are activated, de-activated or updated
  • Lock working load specifications and only rebuild when new requirements are conflict-free
  • Load Font Awesome release version metadata from the fontawesome.com releases API

3.2.1

  • Last stable version of the old plugin