Beschrijving
De officiële manier om Font Awesome Free of Pro iconen op je WordPress site te gebruiken, gebracht door het Font Awesome team.
Functies
Our official plugin makes it easy to add Font Awesome icons to your pages, posts, and templates and includes the following features:
- Use Pro or Free icons, from the latest release or a specific release.
- Use custom icons from your Pro Kits.
- Use a Font Awesome Kit to add any of our icons (including the latest Duotone styles and custom icons!), or select the Font Awesome CDN for Version 5 icons only.
- Zet automatische compatibiliteit voor Font Awesome versie 4 aan als jij – of je plugins – nog steeds versie 4 syntax gebruiken.
- Problemen onderzoeken en oplossen wanneer meerdere versies van Font Awesome op je site worden geladen vanuit andere plugins/thema’s, wat onverwachte icoon weergave of technische problemen kan veroorzaken.
Hoe te gebruiken
Installeer en schakel de plugin in (Zie de installatie tab voor details)
How to Add and Style Icons
Full docs on how to use the plugin and add icons are available on the Font Awesome Docs site.
Add Icons in the Block Editor
Once you’ve set up your plugin, you can add icons as blocks or inline with text.
To add icons as blocks, select the “Font Awesome Icon” block, and then click the “Choose Icon button” to open the Icon Chooser.
To add icons inline, select the Font Awesome option in the format toolbar to open the Icon Chooser. (Note: Inline icons require at least WP 6.3.)
Once you open the Icon Chooser, add icons by:
- Searching for the icon you want – you can search by icon name, category, or keyword.
- Changing the Family and Style using the drop downs if you want an icon in a different style.
- When you see the icon you want, clicking it to enter it into the content of your page or post.
Note: If you want to search and add Pro icons in the Icon Chooser, make sure you set your plugin to use a Pro Kit.
Add Icons in The Classic Editor
If you need to add icons in the classic editor, you can use the icon names in shortcodes or HTML. Add an icon using shortcodes to any text area – just add the name of the icon and a style 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 icon name. And if you don’t include any style prefix, the icon will default to the Classic Solid style.
De shortcode voor een pictogram ziet er als volgt uit:
[icon name="stroopwafel"]
[icon name="stroopwafel" prefix="fa-sharp fa-light"]
Je kunt ook eenvoudige HTML gebruiken met standaard Font Awesome-syntaxis, zoals dit:
<i class="fa-solid fa-stroopwafel"></i>
Using Pro Icons and Features
To use a Kit to power your icons, create a Kit on FontAwesome.com and select “Pro icons” in the Kit Settings tab. Then grab your API Token from your Font Awesome Account page and add it to your WordPress plugin settings.
To use the CDN to power your icons, know that you will only be able to use icons from Version 5. To enable Pro icons, add your site’s domain to the list allowed domains on your Font Awesome CDN Settings page and then use shortcodes or HTML to add the icons into your content.
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 op de Font Awesome WordPress docs.
Upgrading from Plugin Version 4
[icon]
shortcodes found in Block Editor content and elsewehre will continue to work as before,
though new icons added with the Icon Chooser in the Block Editor will be inline SVGs.
Previously added[icon]
shortcodes will not be automatically be converted into the new inline SVG
format. If you want to convert an[icon]
shortcode, delete it and re-add the icon using the Icon Chooser in the Block Editor.
Bekijk ook
De README op GitHub heeft details voor WordPress site eigenaren en ontwikkelaars.
Je kunt meer informatie krijgen over alle beschikbare instellingen en probleemoplossing op de Font Awesome WordPress docs.
En er zijn API-documenten voor ontwikkelaars.
Schermafdrukken
Add icons as blocks Add icons inline with text Search and add icons from Font Awesome Free or Pro (with subscription) Style icons (size, color, rotate, flip) Animate your icons Gebruik een Font Awesome Kit om de pictogrammen van je site van stroom te voorzien Detecteer en los problemen op met conflicterende versies van Font Awesome op je site
Blokken
Deze plugin heeft 1 blok.
- Font Awesome Icon Add a Font Awesome icon.
Installatie
From the Plugins Directory in WordPress Admin
Vanuit de “Plugin toevoegen” pagina in het WordPress dashboard:
-
Search the plugins directory by
author: fontawesome
-
Klik op “Installeren” op de Font Awesome plugin in de zoekresultaten
-
Klik op “Activeren”
Een zip archief aan het installeren
-
Klik op Downloaden in het folder item van deze plugin om het bestand
.zip
op te halen -
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.
Using Pro Icons and Features
To add icons using 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 iconen (alleen V5) toe te voegen met behulp van de CDN, moet je het domein van je site toevoegen aan de lijst met toegestane domeinen op je Font Awesome CDN-instellingenpagina en shortcodes of HTML gebruiken om de iconen 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).
FAQ
Je kunt meer informatie krijgen over het gebruik van de plugin, details over beschikbare instellingen en antwoorden op veelgestelde vragen in de WordPress docs over Font Awesome.
Beoordelingen
Bijdragers & ontwikkelaars
“Font Awesome” is open source software. De volgende personen hebben bijgedragen aan deze plugin.
Bijdragers“Font Awesome” is vertaald in 16 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
5.0.1
-
Automatically fetch the SVG stylesheet any time the WP admin dashboard or Font Awesome plugin settings
page is loaded. This stylesheet is required for the new embedded SVG icons to display correctly when they
are added using the Icon Chooser in the Block Editor. If you do not use the Block Editor, and do not want
this additional stylesheet to be loaded, you can disable it from loading by adding the following to
your theme’s functions.php or equivalent:add_action("wp_enqueue_scripts", function () {
wp_dequeue_style("font-awesome-svg-styles");
});
5.0.0
- Enhance support for the Block Editor. Add icons as blocks or as inline Rich Text using the
Icon Chooser. Icons added in the Block Editor using the Icon Chooser are added as inline SVGs,
and can be visually previewed, styled, sized, and animated within the Block Editor. This works
for pages, posts, and in the Full Site Editor. - Improve Icon Chooser performance.
- Remove support for Font Awesome 3 icon names in the
[icon]
shortcode. - Change minimum supported WordPress to 5.8.
- Change minimum supported PHP to 7.4.
4.5.0
- Update the Icon Chooser to support all available family styles for the active version of
Font Awesome. The available family styles are dynamically loaded so that when new
family styles are introduced in new versions of Font Awesome, they will be immediately
available in the Icon Chooser. - Make the Icon Chooser available in the Full Site Editor.
- Change the format of some network requests in order to accommodate common Web Application
Firewall settings. This resolves a common cause of error messages, such as:
“Something has gone horribly wrong” in the Icon Chooser, or “Couldn’t save those changes” on
the plugin’s settings page.
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
- Laatste stabiele versie van de oude plugin