WordCamp Bari 2019

Come caricare
un icon set in un sito
FONT AWESOME
IN WORDPRESS
WordCamp Bari 2019

STEFANO
MINOIA
Imprenditore, webmaster,
WordPress enthusiast, …
 RyokuhiOnWP
 ryokuhi ryokuhi
 ryokuhi
 Ryokuhi
 stefano.minoia.3
 stefano-minoia-960454110

LINK UTILI
https://www.slideshare.net/StefanoMinoia/wordcamp-bari-2019
https://git.io/fj8B0

DI COSA PARLERÒ
Font Awesome
Inserire l’icon set nel sito
Inserire le icone in una pagina
Font Awesome in WordPress – WordCamp Bari 2019

FONT AWESOME

COS’È FONT
AWESOME?
È l’icon set più diffuso in
Italia e nel mondo.
Include un frameworkInclude un framework
avanzato, ma
semplice da usare.
Usa icone vettoriali

PERCHÉ UTILIZZARE FONT AWESOME?
Solid
Web
Desktop
Free (1515)
Pro (5099)
Solid
Regular
(Light)
Brands
Icon font
SVG + JS

Font Awesome Free
è open sourceè open source
 Icone: CC BY 4.0 License
 Font: SIL OFL 1.1 License
 Codice: MIT Licence

INSERIRE L’ICON SET
NEL SITO

1) Plugin
2) Webfont (stylesheet)
QUATTRO
SOLUZIONI
3) SVG + JS (script)
4) Sprite SVG

SOLUZIONE 1
UTILIZZARE IL PLUGIN DI FONT AWESOME
SOLUZIONE 1
UTILIZZARE IL PLUGIN DI FONT AWESOME

SOLUZIONE 2
CARICARE IL FOGLIO DI STILE DEL WEBFONT
SOLUZIONE 2
CARICARE IL FOGLIO DI STILE DEL WEBFONT

FONT AWESOME FREE v5.8.2
WEBFONT CON TUTTI GLI STILI
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-
oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous">

SOLUZIONE 2/A
/** functions.php
* Enqueue Font Awesome
*/
function fontawesome_enqueue() {function fontawesome_enqueue() {
echo '<link rel="stylesheet"
integrity="sha384-
oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay"
crossorigin="anonymous">';
}
add_action( 'wp_enqueue_scripts', 'fontawesome_enqueue' );

RISULTATO 2/A
integrity="sha384-
integrity="sha384-

SOLUZIONE 2/B
/** functions.php
*/
wp_enqueue_style( 'font-awesome',
'https://use.fontawesome.com/releases/v5.8.2/css/all.css', array(),
null );
}

RISULTATO 2/B
<link rel="stylesheet" id="font-awesome-css"
type="text/css" media="all">type="text/css" media="all">
integrity="sha384-

SOLUZIONE 2/C (1)
/** functions.php
*/
wp_enqueue_style( 'font-awesome',
'https://use.fontawesome.com/releases/v5.8.2/css/all.css', array(),
null );
/* Filter the link tag to add the integrity and crossorigin
* attributes for completeness.
*/
add_filter(

SOLUZIONE 2/C (2)
'style_loader_tag',
function( $html, $handle ) {
if ( in_array( $handle, ['font-awesome'], true ) ) {
return preg_replace(return preg_replace(
'//>$/',
'integrity="' . 'sha384-
oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' .
'" crossorigin="anonymous" />',
$html,
1

SOLUZIONE 2/C (3)
);
} else {
return $html;
}}
},
10,
2
);
}

RISULTATO 2/C
type="text/css" media="all" integrity="sha384-
integrity="sha384-

SOLUZIONE 2/D (1)
/** functions.php
*/
$version = '5.8.2';
$integrity_key = 'sha384-
oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay';
wp_enqueue_style(
'font-awesome',

SOLUZIONE 2/D (2)
'https://use.fontawesome.com/releases/v' . $version .
'/css/all.css',
array(),
nullnull
);
/* Filter the link tag to add the integrity and crossorigin
* attributes for completeness.
*/
add_filter(
'style_loader_tag',

SOLUZIONE 2/D (3)
function( $html, $handle ) {
return preg_replace(
'//>$/','//>$/',
'integrity="' . $integrity_key . '" crossorigin="anonymous"
/>',
$html,
1
);

SOLUZIONE 2/D (4)
} else {
return $html;
}
},},
10,
2
);
}

RISULTATO 2/D
type="text/css" media="all" integrity="sha384-
integrity="sha384-

SOLUZIONE 3
CARICARE LO SCRIPT DI SVG + JS
SOLUZIONE 3
CARICARE LO SCRIPT DI SVG + JS

FONT AWESOME FREE v5.8.2
SVG + JS CON TUTTI GLI STILI
<script defer
src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"
integrity="sha384-
DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH"DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH"
crossorigin="anonymous"></script>

SOLUZIONE 3/A
/** functions.php
*/
echo '<script defer
integrity="sha384-
DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH"
crossorigin="anonymous"></script>';
}

RISULTATO 3/A
<script defer
integrity="sha384-
DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH"DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH"
<script defer
integrity="sha384-

SOLUZIONE 3/B
/** functions.php
*/
wp_enqueue_script( 'font-awesome',
'https://use.fontawesome.com/releases/v5.8.2/js/all.js', array(),
null );
}

RISULTATO 3/B
<script type="text/javascript"
src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<script defer<script defer
integrity="sha384-

SOLUZIONE 3/C (1)
/** functions.php
*/
wp_enqueue_script( 'font-awesome',
'https://use.fontawesome.com/releases/v5.8.2/js/all.js', array(),
null );
/* Filter the script tag to add additional attributes for
* integrity, crossorigin, defer.
*/
add_filter(

'script_loader_tag',
function( $tag, $handle ) {
$extra_tag_attributes = 'defer crossorigin="anonymous"';
SOLUZIONE 3/C (2)
$extra_tag_attributes .= ' integrity="' . 'sha384-
DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH' .
'"';
$modified_script_tag = preg_replace(
'/<scripts*(.*?src=.*?)>/',
'<script $extra_tag_attributes ' . '1>',
$tag,
1

SOLUZIONE 3/C (3)
);
return $modified_script_tag;
} else {
return $tag;return $tag;
}
},
10,
2
);
}

RISULTATO 3/C
<script defer crossorigin="anonymous" integrity="sha384-
type="text/javascript"
src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<script defer
integrity="sha384-

SOLUZIONE 3/D (1)
/** functions.php
*/
$version = '5.8.2';
$integrity_key = 'sha384-
DJ25uNYET2XCl5ZF++U8eNxPWqcKohUUBUpKGlNLMchM7q4Wjg2CUpjHLaL8yYPH';
wp_enqueue_script(
'font-awesome',
'https://use.fontawesome.com/releases/v' . $version .
'/js/all.js',

SOLUZIONE 3/D (2)
array(),
null
);
/* Filter the script tag to add additional attributes for/* Filter the script tag to add additional attributes for
integrity, crossorigin,
* defer.
*/
add_filter(
'script_loader_tag',
function( $tag, $handle ) use ( $integrity_key ) {

SOLUZIONE 3/D (3)
$extra_tag_attributes = 'defer crossorigin="anonymous"';
$extra_tag_attributes .= ' integrity="' . $integrity_key .
'"';'"';
$modified_script_tag = preg_replace(
'/<scripts*(.*?src=.*?)>/',
"<script $extra_tag_attributes " . '1>',
$tag,
1
);

SOLUZIONE 3/D (4)
return $modified_script_tag;
} else {
return $tag;
}}
},
10,
2
);
}

RISULTATO 3/D
<script defer crossorigin="anonymous" integrity="sha384-
type="text/javascript"
src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>src="https://use.fontawesome.com/releases/v5.8.2/js/all.js"></script>
<script defer
integrity="sha384-

INSERIRE LE ICONE
IN UNA PAGINA

USO DI
BASE
1) Nome dell’icona (newspaper)
2) Stile da utilizzare (solid, brands, …)
<i class="fas fa-newspaper"></i>
<i class="fab fa-wordpress"></i>
<span class="fas fa-newspaper"></span>
Solid Regular (Light) Brands
fas far fal fab fa

SOLUZIONE 4
SPRITE SVG
SOLUZIONE 4
SPRITE SVG

SPRITE SVG (1)
https://git.io/fj8B0

SPRITE SVG (2)
functions.php
/inc/icon-functions.php
style.css
/assets/images/svg-icons.svg

SPRITE SVG (3)
<symbol id="icon-iconname" viewBox="0 0 width height">
<path d=""></path>
/symbol>

SPRITE SVG (4)
<svg xmlns="http://www.w3.org/2000/svg" class="svg-inline--fa fa-
shopping-cart fa-w-18" role="img" aria-hidden="true" viewBox="0 0 576
512" focusable="false" data-icon="shopping-cart" data-
prefix="fas"><path fill="currentColor" d="M 528.12 301.319 l 47.273 -
208 C 578.806 78.301 567.391 64 551.99 64 H 159.208 l -9.166 -44.81 C208 C 578.806 78.301 567.391 64 551.99 64 H 159.208 l -9.166 -44.81 C
147.758 8.021 137.93 0 126.529 0 H 24 C 10.745 0 0 10.745 0 24 v 16 c
0 13.255 10.745 24 24 24 h 69.883 l 70.248 343.435 C 147.325 417.1
136 435.222 136 456 c 0 30.928 25.072 56 56 56 s 56 -25.072 56 -56 c
0 -15.674 -6.447 -29.835 -16.824 -40 h 209.647 C 430.447 426.165 424
440.326 424 456 c 0 30.928 25.072 56 56 56 s 56 -25.072 56 -56 c 0 -
22.172 -12.888 -41.332 -31.579 -50.405 l 5.517 -24.276 c 3.413 -
15.018 -8.002 -29.319 -23.403 -29.319 H 218.117 l -6.545 -32 h
293.145 c 11.206 0 20.92 -7.754 23.403 -18.681 Z" /></svg>

SPRITE SVG (5)
<symbol id="icon-shopping-cart" viewBox="0 0 576 512">
<path d="M 528.12 301.319 l 47.273 -208 C 578.806 78.301 567.391 64
551.99 64 H 159.208 l -9.166 -44.81 C 147.758 8.021 137.93 0 126.529
0 H 24 C 10.745 0 0 10.745 0 24 v 16 c 0 13.255 10.745 24 24 24 h
69.883 l 70.248 343.435 C 147.325 417.1 136 435.222 136 456 c 069.883 l 70.248 343.435 C 147.325 417.1 136 435.222 136 456 c 0
30.928 25.072 56 56 56 s 56 -25.072 56 -56 c 0 -15.674 -6.447 -29.835
-16.824 -40 h 209.647 C 430.447 426.165 424 440.326 424 456 c 0
30.928 25.072 56 56 56 s 56 -25.072 56 -56 c 0 -22.172 -12.888 -
41.332 -31.579 -50.405 l 5.517 -24.276 c 3.413 -15.018 -8.002 -29.319
-23.403 -29.319 H 218.117 l -6.545 -32 h 293.145 c 11.206 0 20.92 -
7.754 23.403 -18.681 Z"></path>
</symbol>

SPRITE SVG (6)
<?php childthemename_get_svg( 'icon-shopping-cart' ); ?>

GRAZIE!
DOMANDE?

RISORSE AGGIUNTIVE
https://fontawesome.com/
https://developer.wordpress.org/reference/https://developer.wordpress.org/reference/
https://github.com/FortAwesome/Font-Awesome
https://github.com/FortAwesome/wordpress-fontawesome

CREDITS
Photos by Ilya Pavlov, Eco Warrior Princess, Kristian Strand,
Jason Leung, Harpal Singh, Richard Clark, Chinh Le Duc,
Hunter Haley and Jon Moore on UnsplashHunter Haley and Jon Moore on Unsplash
Arsenault, Cody (August 9, 2018). "Icon Fonts vs SVGs -
Which One Should You Use In 2018?".
https://www.keycdn.com/blog/icon-fonts-vs-svgs

WordCamp Bari 2019

Recommended

Recommended

More Related Content

What's hot

What's hot (13)

Similar to WordCamp Bari 2019

Similar to WordCamp Bari 2019 (20)

Recently uploaded

Recently uploaded (20)

WordCamp Bari 2019