Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font Awesome icon list generation code #57

Open
eri-trabiccolo opened this issue Jul 3, 2018 · 2 comments
Open

Font Awesome icon list generation code #57

eri-trabiccolo opened this issue Jul 3, 2018 · 2 comments
Labels

Comments

@eri-trabiccolo
Copy link
Collaborator

/*
* I've put this in the nimble-builder.php file
* any other location assuminig the NIMBLE_BASE_PATH is defined would be fine too
*/
add_action( 'plugins_loaded', 'generate_json' );
function generate_json() {
    $base_path = NIMBLE_BASE_PATH . '/assets/front/fonts/webfonts';
    $json_dest = NIMBLE_BASE_PATH . '/assets/faicons.json';
    $files_src = array(
        'fa-solid-900.svg'   => 'fas',
        'fa-regular-400.svg' => 'far',
        'fa-brands-400.svg'  => 'fab',
    );

    $icons = array();
    foreach ( $files_src as $file => $icon_prefix ) {
        // $xml will look like (a).
        $xml    = @simplexml_load_file( $base_path . '/' . $file );

        if ( ! $xml ) {
            continue;
        }

        if ( ! isset( $xml->defs->font->glyph ) || ! $xml->defs->font->glyph->count() ) {
            continue;
        }


        // $xml->defs->font->glyph is an array of (SimpleXMLElement Object(s)) icon defintions, as you can see in (a).
        $glyph = $xml->defs->font->glyph;


        foreach( $glyph as $glyph_item ) {
            // Each icon name is accessible via the 'glyp-name' attribute.
            $glyph_item_name = (string)$glyph_item->attributes()->{'glyph-name'}[0];

            // This associative array is created so that we can sort by the icon name.
            $icons[ $icon_prefix . ' fa-' . $glyph_item_name ] = $glyph_item_name;
        }
    }

    if ( empty( $icons ) ) {
        error_log( 'Font Awesome icon list is empty' );
    }
    /*
     * Sort icons by value (name) A-Z ASC and then by key DESC (far, fas)
     * This way we ensure multiple occurrences of the same icon name always respect the same order
     * See (c)
     */
    $icon_classes = array_keys( $icons );
    $icon_names   = array_values( $icons );
    array_multisort( $icon_names, SORT_ASC, $icon_classes, SORT_ASC );
    $icons        = array_combine( $icon_classes, $icon_names );


    // Now that all is sorted let's grab only the keys ( icon classes )
    $icon_keys = array_keys( $icons );

    //json generation
    $json      = json_encode( $icon_keys );

    if ( $json ) {
        //write the json
        @file_put_contents( $json_dest, $json );

        error_log( sprintf( 'Font Awesome json file generated at: %s', $json_dest ) );
    }
}//end function

/*
Data structure documentation

(a) XML of one file
SimpleXMLElement Object
(
    [defs] => SimpleXMLElement Object
        (
            [font] => SimpleXMLElement Object
                (
                    [@attributes] => Array
                        (
                            [id] => fontawesome-free
                            [horiz-adv-x] => 640
                        )

                    [font-face] => SimpleXMLElement Object
                        (
                            [@attributes] => Array
                                (
                                    [font-family] => Font Awesome 5 Free
                                    [units-per-em] => 512
                                    [ascent] => 448
                                    [descent] => 64
                                    [font-weight] => 900
                                    [font-style] => Solid
                                )

                        )

                    [missing-glyph] => SimpleXMLElement Object
                        (
                            [@attributes] => Array
                                (
                                    [horiz-adv-x] => 0
                                )

                        )

                    [glyph] => Array
                        (
                            [0] => SimpleXMLElement Object
                                (
                                    [@attributes] => Array
                                        (
                                            [glyph-name] => address-book
                                            [unicode] => 
                                            [horiz-adv-x] => 448
                                            [d] =>  M436 288C442.627 288 448 293.373 448 300V340C448 346.627 442.627 352 436 352H416V400C416 426.51 394.51 448 368 448H48C21.49 448 0 426.51 0 400V-16C0 -42.51 21.49 -64 48 -64H368C394.51 -64 416 -42.51 416 -16V32H436C442.627 32 448 37.373 448 44V84C448 90.627 442.627 96 436 96H416V160H436C442.627 160 448 165.373 448 172V212C448 218.627 442.627 224 436 224H416V288H436zM208 320C252.183 320 288 284.183 288 240S252.183 160 208 160S128 195.817 128 240S163.817 320 208 320zM336 88C336 74.745 325.255 64 312 64H104C90.745 64 80 74.745 80 88V106.523C80 128.549 94.99 147.7480000000001 116.358 153.09L152.015 162.004C181.116 141.072 226.524 135.059 263.985 162.004L299.642 153.09C321.01 147.748 336 128.548 336 106.523V88z
                                        )

                                )

                            [1] => SimpleXMLElement Object
                                (
                                    [@attributes] => Array
                                        (
                                            [glyph-name] => address-card
                                            [unicode] => 
                                            [horiz-adv-x] => 512
                                            [d] =>  M464 384H48C21.49 384 0 362.51 0 336V48C0 21.49 21.49 0 48 0H464C490.51 0 512 21.49 512 48V336C512 362.51 490.51 384 464 384zM176 304C214.66 304 246 272.66 246 234S214.66 164 176 164S106 195.34 106 234S137.34 304 176 304zM288 101C288 89.402 278.598 80 267 80H85C73.402 80 64 89.402 64 101V117.207C64 136.479 77.116 153.279 95.813 157.953L127.013 165.753C152.477 147.437 192.208 142.176 224.987 165.753L256.187 157.953C274.884 153.279 288 136.48 288 117.207V101zM448 140C448 133.373 442.627 128 436 128H332C325.373 128 320 133.373 320 140V148C320 154.627 325.373 160 332 160H436C442.627 160 448 154.627 448 148V140zM448 204C448 197.373 442.627 192 436 192H332C325.373 192 320 197.373 320 204V212C320 218.627 325.373 224 332 224H436C442.627 224 448 218.627 448 212V204zM448 268C448 261.373 442.627 256 436 256H332C325.373 256 320 261.373 320 268V276C320 282.627 325.373 288 332 288H436C442.627 288 448 282.627 448 276V268z
                                        )

                                )
                            ...
                        )//end glyph
                )//end font
        )//end defs
)//end SimpleXMLElement Object


-------------------
(b) Unordered array of icon_class => name

Array
(
    [fas fa-address-book] => address-book
    [fas fa-address-card] => address-card
    [fas fa-adjust] => adjust
    ...
    [far fa-address-book] => address-book
    [far fa-address-card] => address-card
    [far fa-arrow-alt-circle-down] => arrow-alt-circle-down
    ...
    [fab fa-500px] => 500px
    [fab fa-accessible-icon] => accessible-icon
    [fab fa-accusoft] => accusoft
//end unordered array


(c) Sorted array of icon_class => name : ordered by name ASC and by class ASC
Note the multiple occurrence e.g. of the icon_name address-book and address-cards
Array
(
    [fab fa-500px] => 500px
    [fab fa-accessible-icon] => accessible-icon
    [fab fa-accusoft] => accusoft
    [far fa-address-book] => address-book
    [fas fa-address-book] => address-book
    [far fa-address-card] => address-card
    [fas fa-address-card] => address-card
    [fas fa-adjust] => adjust
    [fab fa-adn] => adn
    [fab fa-adversal] => adversal
    ...
)
*/
@ghost
Copy link

ghost commented Oct 4, 2018

Side note : when updating font awesome, make sure to add a query string version
see : https://stackoverflow.com/questions/41742964/concat-query-string-to-font-face-url#41939675

@ghost
Copy link

ghost commented Feb 14, 2020

updating_font_awesome_icons

  1. From https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself download the font awesome free for web package
  2. Unpack it
    [before copying always make sure we remove the previous fa files so that we don't
    retain not used anymore files]
  3. from hueman/assets/front/ remove the directoriy "webfonts" (it only contains fa fonts)]
  4. from hueman/assets/front/css remove the files: "dev-font-awesome.css" and "font-awesome.min.css"
  5. from fontawesome/ copy the "webfonts" directory into hueman/assets/front/
  6. from fontawesome/css copy the file "all.css" into hueman/assets/front/css and rename it as "dev-font-awesome.css"
  7. add a query string version, see:
    https://stackoverflow.com/questions/41742964/concat-query-string-to-font-face-url#41939675
    [generate min file]
  8. in the hueman directory run the fa minify grunt task: "grunt cssmin:font_awesome_css"
    it'll generate the "hueman/assets/front/css/font-awesome.min.css"
  9. from "customizr/assets/shared/fonts/fa" remove the directory "webfonts"
  10. empty the directory "customizr/assets/shared/fonts/fa/css"
  11. from "hueman/assets/front/css" do:
    11a) copy the file "dev-font-awesome.css" into "customizr/assets/shared/fonts/fa/css"
    and rename it as "fontawesome-all.css"
    11b) copy the file "font-awesome.min.css" into "customizr/assets/shared/fonts/fa/css"
    and rename it as "fontawesome-all.min.css"
  12. from "hueman/assets/front" copy the directory "webfonts" into "customizr/assets/shared/fonts/fa/"
  13. from "nimble/assets/front/fonts" remove the directories "webfonts" and "css"
  14. from "customizr/assets/shared/fonts/fa/" copy the directories "webfonts" and "css" into "nimble/assets/front/fonts"
  15. from "czr-base-fmk/assets/fonts" remove the directories "webfonts" and "css"
  16. from "customizr/assets/shared/fonts/fa/" copy the directories "webfonts" and "css" into "czr-base-fmk/assets/fonts"
  17. run the nimble build tasks that will copy "czr-base-fmk" across other projects
  18. re-generate the nimble FontAwesome icon list see:
    Font Awesome icon list generation code #57 (comment)
  19. update transient name in https://github.com/presscustomizr/nimble-builder/blob/v1.10.9/inc/sektions/_front_dev_php/8_0_1_sektions_front_class_ajax.php#L670
    method sek_retrieve_decoded_font_awesome_icons()

(tip for testing: check the presence of an icon that has been added in the latest version)

ghost pushed a commit to presscustomizr/hueman that referenced this issue Feb 14, 2020
ghost pushed a commit to presscustomizr/hueman that referenced this issue Feb 14, 2020
ghost pushed a commit to presscustomizr/customizr that referenced this issue Feb 14, 2020
ghost pushed a commit to presscustomizr/czr-base-fmk that referenced this issue Feb 14, 2020
ghost pushed a commit that referenced this issue Feb 14, 2020
noErrdev added a commit to noErrdev/Hueman-WordPress-Theme that referenced this issue Aug 26, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant