Macrura

Font Awesome 5 Pro

Recommended Posts

Font Awesome 5 Pro for ProcessWire

At Github: https://github.com/outflux3/FontAwesomePro

I whipped up a font awesome pro module so that i could use those icons in the admin; 

it will be one of those "BYO vendor files", so you'd load your own Font Awesome 5 Pro assets once you buy it (about 1 day left to get the discounted pro license!)...

Just posting this here in case anyone else

...is working on something similar
...already built something like this
...wants to collaborate on it}

The webfont version basically works well in current admin theme but requires a custom css with fontface redefinition to refer to legacy 'fontAwesome' which is used in the admin css.

The svg framework seems to work well, and leaving in the legacy font-awesome means that any icons that can't be replaced by JS are still visible (like :after psuedo classes); SVG framework only works with solid, probably because the new prefixing (fal for light, far for regular..)

This is also going to be interesting for future admin themes, and the new 'regular' style is cute...

59ce52807558f_Modules__ProcessWire__localhost.thumb.jpg.e1466c0e7bb559c16065d62084b2b3e4.jpg

Solid (default):

59ce52a3a0358_Modules__ProcessWire__localhost.thumb.jpg.417c703b693ff3cf48c6c90697e09763.jpg

dashboard example showing more icons:

59ce52d3e7440_Dashboard__ProcessWire__localhost.jpg.6fc3c39cf36a5624e7c06d6fb59d15c5.jpg

SVG framework:

59ce7ebe0fb43_Modules__ProcessWire__localhost.thumb.jpg.06fa13c82ce8db0b545c99ba3f7e3daa.jpg

  • Like 4

Share this post


Link to post
Share on other sites

Just a quick update, so this module works fine and if you purchased FontAwesome 5 Pro and need/want to use those icons in the PW admin, this module allows that do be done, and works with default and Reno themes; it doesn't work on UiKit theme yet, see here for the reason  https://github.com/processwire/processwire-requests/issues/120

  • Like 2

Share this post


Link to post
Share on other sites

Update - this now works on UiKit theme, but the method of nullifying the default uikit is somewhat ugly - it basically has to replace the font-awesome css file that is hardcode added to the theme with a blank dummy, and then has to add a copy of the original back at the top of the styles; this is because the FAPro5 styles need to come after the core version in order that the new styles and font are applied.

Share this post


Link to post
Share on other sites
1 hour ago, Macrura said:

this is because the FAPro5 styles need to come after the core version in order that the new styles and font are applied

If you want to add a CSS file so that it is linked at the bottom of the list of admin styles and scripts you can use a hook like this:

$wire->addHookAfter('AdminTheme::getExtraMarkup', function(HookEvent $event) {
    $parts = $event->return;
    $parts['head'] .= '<link rel="stylesheet" href="/path/to/custom.css">';
    $event->return = $parts;
});

 

  • Like 1

Share this post


Link to post
Share on other sites
1 hour ago, Robin S said:

If you want to add a CSS file so that it is linked at the bottom of the list of admin styles and scripts you can use a hook like this:

ok thanks - will look into that!

Share this post


Link to post
Share on other sites

@Robin S

I tested your way, but it's not working, i'm getting null returning on the $event->return

Share this post


Link to post
Share on other sites

It's working for me. Double-check the hook code, or maybe you have some other module or hook interfering? AdminTheme::getExtraMarkup should never return null - even if it's unused it still returns an array.

$wire->addHookAfter('AdminTheme::getExtraMarkup', function(HookEvent $event) {
    $parts = $event->return;
    $parts['head'] .= '<link rel="stylesheet" href="/site/templates/custom.css">';
    $event->return = $parts;
});

2017-11-20_123139.png.c617456bdb67811bd8342872da56e0b2.png

  • Like 1

Share this post


Link to post
Share on other sites

ok hang on let me check this - where are you adding that hook (i'm adding it in ready method)

dangit, was adding it before... it's totally working now.

  • Like 1

Share this post


Link to post
Share on other sites

Hi @Macrura,

Is this module working with the latest Font Awesome 5 Pro releases? The readme says to copy the Font Awesome files to the module directory and rename the outer folder as "vendor", and I see paths like below in the code:

$this->config->urls->$name . "vendor/css/fontawesome-pro-core.css?v=$version"

I have an early Release Candidate version of FA Pro 5 that has paths like that, but the recent versions look like this...

2018-01-30_162147.png.58f12b48bbd63db9749b184f8101f2ff.png

...and there is no file included anywhere named "fontawesome-pro-core.css".

Another question: when the module is installed, does it replace the core icon preview with the icons from FA Pro 5?

2018-01-30_163251.png.98df66dcba1357a80924d29559e354ea.png

Share this post


Link to post
Share on other sites

yeah they changed a lot of things since the module was first made; it's been updated to support the latest new folder structure, you only need to now copy the css, js, sprites and webfonts folders from the repo into the vendor folder. it should work then.

not sue about the core icon preview, have not tested it, since i always use selectize.js for the that (and it does work)

  • Like 1

Share this post


Link to post
Share on other sites

Thanks. Still not sure about adding the Font Awesome files though. Maybe you could spell it out a bit more in the readme?

When it says "css, js, sprites and webfonts folders", which ones exactly? There aren't folders with those names in repo root - it looks like this...

2018-01-31_105248.png.15caa8a7531b5d6329a7f552724dbe77.png

...and there are multiple folders named "css" within the repo structure.

Thanks.

 

Share this post


Link to post
Share on other sites

Okay, I got the vendor folders sorted - it's the ones in the "on-server" folder, right?

I can see the basic v5 icons but I can't seem to view the new v5 Pro icons. Even with Selectize enabled for the icon select in SelectizeTemplateFieldTags I can't find the "alarm-clock" icons, for instance.

2018-01-31_112103.png.33eda763210c1cea09172d923deabc35.png

2018-01-31_112644.png.d146cc0efc6cc255edc9737a4d28d1e8.png

 

A few other little things:

1. In FontAwesomePro.module, $this->config->urls->$name . "vendor/js/v4-shims{$min}.js?v=$version" should be "$this->config->urls->$name . "vendor/js/fa-v4-shims{$min}.js?v=$version"

2. In the readme/info for SelectizeTemplateFieldTags it could be clearer that the module has a dependency on the JquerySelectize module. The module gives a JS error that can stop the admin interface from loading properly if JquerySelectize is not installed.

 2018-01-31_113541.png.7da9835590cc48bd4afcd3941a39b62a.png

3. It's a little hard to find the JquerySelectize module in the modules directory because it is listed under author "outflux3" instead of "macrura".

 

Share this post


Link to post
Share on other sites
2 hours ago, Robin S said:

Okay, I got the vendor folders sorted - it's the ones in the "on-server" folder, right?

Yes

2 hours ago, Robin S said:

1. In FontAwesomePro.module, $this->config->urls->$name . "vendor/js/v4-shims{$min}.js?v=$version" should be "$this->config->urls->$name . "vendor/js/fa-v4-shims{$min}.js?v=$version"

thanks for catching that, it is fixed now.

2 hours ago, Robin S said:

2. In the readme/info for SelectizeTemplateFieldTags it could be clearer that the module has a dependency on the JquerySelectize module. The module gives a JS error that can stop the admin interface from loading properly if JquerySelectize is not installed.

That's actually not the case, but looks like the latest version wasn't updated to the modules dir; i just upped the version and committed the changes to GH. the module checks for the core version and then only depends on JquerySelectize if less than 3.0.67

SelectizeTemplateFieldTags_info_php.jpg.529b41781ebbb89332f069c29bc91356.jpg

2 hours ago, Robin S said:

3. It's a little hard to find the JquerySelectize module in the modules directory because it is listed under author "outflux3" instead of "macrura".

Yeah, i have no idea how that happened; Will try and fix/change at some point..

2 hours ago, Robin S said:

I can see the basic v5 icons but I can't seem to view the new v5 Pro icons. Even with Selectize enabled for the icon select in SelectizeTemplateFieldTags I can't find the "alarm-clock" icons, for instance.

The module doesn't effect the listing of icons that is generated by the core; it only replaces the icons; I only use pro icons currently on my dashboard module; but it would be nice to be able to use the icons for fields and templates; i can try and research how to hook in and change those lists.

  • Like 2

Share this post


Link to post
Share on other sites

I'm having troubles adding the new icons to the inputfieldIcon;

that inputfield reads the icon classes from a separate file during construct; the options are stored in a protected var that the inputfield uses for rendering the icon select, and also for getting/setting; this means we can't just hook into render, because even if hooking into render and replace, when you save, it won't recognize the value from the list and then it will knock out the value of the option to blank;

I think the only sensible way to do this is to include a copy of the InputfieldIcon with the module and then provide instructions to go into the inputfield settings and tell it to use that version. Hopefully this module will not be modified in the core very often...

and another problem, getting the list of all the font classes for the new list...

Share this post


Link to post
Share on other sites
On 01/02/2018 at 4:00 PM, Macrura said:

I'm having troubles adding the new icons to the inputfieldIcon

Yeah, that is difficult.

Instead of including a copy of InputfieldIcon, another approach could be to auto-install a custom inputfield module (e.g. InputfieldIconFaPro). Then hook into the form rendering of ProcessTemplate and ProcessField and remove the existing inputfield, adding InputfieldIconFaPro in it's place with the same name (so it still reads/writes the "icon" property).

On 01/02/2018 at 4:00 PM, Macrura said:

and another problem, getting the list of all the font classes for the new list...

Here are the classes (got them with some regex find/replace in file web-fonts-with-css/scss/_icons.scss):

Spoiler

fa-500px
fa-accessible-icon
fa-accusoft
fa-address-book
fa-address-card
fa-adjust
fa-adn
fa-adversal
fa-affiliatetheme
fa-alarm-clock
fa-algolia
fa-align-center
fa-align-justify
fa-align-left
fa-align-right
fa-amazon
fa-amazon-pay
fa-ambulance
fa-american-sign-language-interpreting
fa-amilia
fa-anchor
fa-android
fa-angellist
fa-angle-double-down
fa-angle-double-left
fa-angle-double-right
fa-angle-double-up
fa-angle-down
fa-angle-left
fa-angle-right
fa-angle-up
fa-angrycreative
fa-angular
fa-app-store
fa-app-store-ios
fa-apper
fa-apple
fa-apple-pay
fa-archive
fa-arrow-alt-circle-down
fa-arrow-alt-circle-left
fa-arrow-alt-circle-right
fa-arrow-alt-circle-up
fa-arrow-alt-down
fa-arrow-alt-from-bottom
fa-arrow-alt-from-left
fa-arrow-alt-from-right
fa-arrow-alt-from-top
fa-arrow-alt-left
fa-arrow-alt-right
fa-arrow-alt-square-down
fa-arrow-alt-square-left
fa-arrow-alt-square-right
fa-arrow-alt-square-up
fa-arrow-alt-to-bottom
fa-arrow-alt-to-left
fa-arrow-alt-to-right
fa-arrow-alt-to-top
fa-arrow-alt-up
fa-arrow-circle-down
fa-arrow-circle-left
fa-arrow-circle-right
fa-arrow-circle-up
fa-arrow-down
fa-arrow-from-bottom
fa-arrow-from-left
fa-arrow-from-right
fa-arrow-from-top
fa-arrow-left
fa-arrow-right
fa-arrow-square-down
fa-arrow-square-left
fa-arrow-square-right
fa-arrow-square-up
fa-arrow-to-bottom
fa-arrow-to-left
fa-arrow-to-right
fa-arrow-to-top
fa-arrow-up
fa-arrows
fa-arrows-alt
fa-arrows-alt-h
fa-arrows-alt-v
fa-arrows-h
fa-arrows-v
fa-assistive-listening-systems
fa-asterisk
fa-asymmetrik
fa-at
fa-audible
fa-audio-description
fa-autoprefixer
fa-avianex
fa-aviato
fa-aws
fa-backward
fa-badge
fa-badge-check
fa-balance-scale
fa-ban
fa-bandcamp
fa-barcode
fa-bars
fa-baseball
fa-baseball-ball
fa-basketball-ball
fa-basketball-hoop
fa-bath
fa-battery-bolt
fa-battery-empty
fa-battery-full
fa-battery-half
fa-battery-quarter
fa-battery-slash
fa-battery-three-quarters
fa-bed
fa-beer
fa-behance
fa-behance-square
fa-bell
fa-bell-slash
fa-bicycle
fa-bimobject
fa-binoculars
fa-birthday-cake
fa-bitbucket
fa-bitcoin
fa-bity
fa-black-tie
fa-blackberry
fa-blind
fa-blogger
fa-blogger-b
fa-bluetooth
fa-bluetooth-b
fa-bold
fa-bolt
fa-bomb
fa-book
fa-bookmark
fa-bowling-ball
fa-bowling-pins
fa-boxing-glove
fa-braille
fa-briefcase
fa-browser
fa-btc
fa-bug
fa-building
fa-bullhorn
fa-bullseye
fa-buromobelexperte
fa-bus
fa-buysellads
fa-calculator
fa-calendar
fa-calendar-alt
fa-calendar-check
fa-calendar-edit
fa-calendar-exclamation
fa-calendar-minus
fa-calendar-plus
fa-calendar-times
fa-camera
fa-camera-alt
fa-camera-retro
fa-car
fa-caret-circle-down
fa-caret-circle-left
fa-caret-circle-right
fa-caret-circle-up
fa-caret-down
fa-caret-left
fa-caret-right
fa-caret-square-down
fa-caret-square-left
fa-caret-square-right
fa-caret-square-up
fa-caret-up
fa-cart-arrow-down
fa-cart-plus
fa-cc-amazon-pay
fa-cc-amex
fa-cc-apple-pay
fa-cc-diners-club
fa-cc-discover
fa-cc-jcb
fa-cc-mastercard
fa-cc-paypal
fa-cc-stripe
fa-cc-visa
fa-centercode
fa-certificate
fa-chart-area
fa-chart-bar
fa-chart-line
fa-chart-pie
fa-check
fa-check-circle
fa-check-square
fa-chess
fa-chess-bishop
fa-chess-bishop-alt
fa-chess-board
fa-chess-clock
fa-chess-clock-alt
fa-chess-king
fa-chess-king-alt
fa-chess-knight
fa-chess-knight-alt
fa-chess-pawn
fa-chess-pawn-alt
fa-chess-queen
fa-chess-queen-alt
fa-chess-rook
fa-chess-rook-alt
fa-chevron-circle-down
fa-chevron-circle-left
fa-chevron-circle-right
fa-chevron-circle-up
fa-chevron-double-down
fa-chevron-double-left
fa-chevron-double-right
fa-chevron-double-up
fa-chevron-down
fa-chevron-left
fa-chevron-right
fa-chevron-square-down
fa-chevron-square-left
fa-chevron-square-right
fa-chevron-square-up
fa-chevron-up
fa-child
fa-chrome
fa-circle
fa-circle-notch
fa-clipboard
fa-clock
fa-clone
fa-closed-captioning
fa-cloud
fa-cloud-download
fa-cloud-download-alt
fa-cloud-upload
fa-cloud-upload-alt
fa-cloudscale
fa-cloudsmith
fa-cloudversify
fa-club
fa-code
fa-code-branch
fa-code-commit
fa-code-merge
fa-codepen
fa-codiepie
fa-coffee
fa-cog
fa-cogs
fa-columns
fa-comment
fa-comment-alt
fa-comments
fa-compass
fa-compress
fa-compress-alt
fa-compress-wide
fa-connectdevelop
fa-contao
fa-copy
fa-copyright
fa-cpanel
fa-creative-commons
fa-credit-card
fa-credit-card-blank
fa-credit-card-front
fa-cricket
fa-crop
fa-crosshairs
fa-css3
fa-css3-alt
fa-cube
fa-cubes
fa-curling
fa-cut
fa-cuttlefish
fa-d-and-d
fa-dashcube
fa-database
fa-deaf
fa-delicious
fa-deploydog
fa-deskpro
fa-desktop
fa-desktop-alt
fa-deviantart
fa-diamond
fa-digg
fa-digital-ocean
fa-discord
fa-discourse
fa-dochub
fa-docker
fa-dollar-sign
fa-dot-circle
fa-download
fa-draft2digital
fa-dribbble
fa-dribbble-square
fa-dropbox
fa-drupal
fa-dumbbell
fa-dyalog
fa-earlybirds
fa-edge
fa-edit
fa-eject
fa-elementor
fa-ellipsis-h
fa-ellipsis-h-alt
fa-ellipsis-v
fa-ellipsis-v-alt
fa-ember
fa-empire
fa-envelope
fa-envelope-open
fa-envelope-square
fa-envira
fa-eraser
fa-erlang
fa-ethereum
fa-etsy
fa-euro-sign
fa-exchange
fa-exchange-alt
fa-exclamation
fa-exclamation-circle
fa-exclamation-square
fa-exclamation-triangle
fa-expand
fa-expand-alt
fa-expand-arrows
fa-expand-arrows-alt
fa-expand-wide
fa-expeditedssl
fa-external-link
fa-external-link-alt
fa-external-link-square
fa-external-link-square-alt
fa-eye
fa-eye-dropper
fa-eye-slash
fa-facebook
fa-facebook-f
fa-facebook-messenger
fa-facebook-square
fa-fast-backward
fa-fast-forward
fa-fax
fa-female
fa-field-hockey
fa-fighter-jet
fa-file
fa-file-alt
fa-file-archive
fa-file-audio
fa-file-check
fa-file-code
fa-file-edit
fa-file-excel
fa-file-exclamation
fa-file-image
fa-file-minus
fa-file-pdf
fa-file-plus
fa-file-powerpoint
fa-file-times
fa-file-video
fa-file-word
fa-film
fa-film-alt
fa-filter
fa-fire
fa-fire-extinguisher
fa-firefox
fa-first-order
fa-firstdraft
fa-flag
fa-flag-checkered
fa-flask
fa-flickr
fa-flipboard
fa-fly
fa-folder
fa-folder-open
fa-font
fa-font-awesome
fa-font-awesome-alt
fa-font-awesome-flag
fa-fonticons
fa-fonticons-fi
fa-football-ball
fa-football-helmet
fa-fort-awesome
fa-fort-awesome-alt
fa-forumbee
fa-forward
fa-foursquare
fa-free-code-camp
fa-freebsd
fa-frown
fa-futbol
fa-gamepad
fa-gavel
fa-gem
fa-genderless
fa-get-pocket
fa-gg
fa-gg-circle
fa-gift
fa-git
fa-git-square
fa-github
fa-github-alt
fa-github-square
fa-gitkraken
fa-gitlab
fa-gitter
fa-glass-martini
fa-glide
fa-glide-g
fa-globe
fa-gofore
fa-golf-ball
fa-golf-club
fa-goodreads
fa-goodreads-g
fa-google
fa-google-drive
fa-google-play
fa-google-plus
fa-google-plus-g
fa-google-plus-square
fa-google-wallet
fa-graduation-cap
fa-gratipay
fa-grav
fa-gripfire
fa-grunt
fa-gulp
fa-h-square
fa-h1
fa-h2
fa-h3
fa-hacker-news
fa-hacker-news-square
fa-hand-lizard
fa-hand-paper
fa-hand-peace
fa-hand-point-down
fa-hand-point-left
fa-hand-point-right
fa-hand-point-up
fa-hand-pointer
fa-hand-rock
fa-hand-scissors
fa-hand-spock
fa-handshake
fa-hashtag
fa-hdd
fa-heading
fa-headphones
fa-heart
fa-heartbeat
fa-hexagon
fa-hips
fa-hire-a-helper
fa-history
fa-hockey-puck
fa-hockey-sticks
fa-home
fa-hooli
fa-hospital
fa-hotjar
fa-hourglass
fa-hourglass-end
fa-hourglass-half
fa-hourglass-start
fa-houzz
fa-html5
fa-hubspot
fa-i-cursor
fa-id-badge
fa-id-card
fa-image
fa-images
fa-imdb
fa-inbox
fa-inbox-in
fa-inbox-out
fa-indent
fa-industry
fa-industry-alt
fa-info
fa-info-circle
fa-info-square
fa-instagram
fa-internet-explorer
fa-ioxhost
fa-italic
fa-itunes
fa-itunes-note
fa-jack-o-lantern
fa-jenkins
fa-joget
fa-joomla
fa-js
fa-js-square
fa-jsfiddle
fa-key
fa-keyboard
fa-keycdn
fa-kickstarter
fa-kickstarter-k
fa-korvue
fa-language
fa-laptop
fa-laravel
fa-lastfm
fa-lastfm-square
fa-leaf
fa-leanpub
fa-lemon
fa-less
fa-level-down
fa-level-down-alt
fa-level-up
fa-level-up-alt
fa-life-ring
fa-lightbulb
fa-line
fa-link
fa-linkedin
fa-linkedin-in
fa-linode
fa-linux
fa-lira-sign
fa-list
fa-list-alt
fa-list-ol
fa-list-ul
fa-location-arrow
fa-lock
fa-lock-alt
fa-lock-open
fa-lock-open-alt
fa-long-arrow-alt-down
fa-long-arrow-alt-left
fa-long-arrow-alt-right
fa-long-arrow-alt-up
fa-long-arrow-down
fa-long-arrow-left
fa-long-arrow-right
fa-long-arrow-up
fa-low-vision
fa-luchador
fa-lyft
fa-magento
fa-magic
fa-magnet
fa-male
fa-map
fa-map-marker
fa-map-marker-alt
fa-map-pin
fa-map-signs
fa-mars
fa-mars-double
fa-mars-stroke
fa-mars-stroke-h
fa-mars-stroke-v
fa-maxcdn
fa-medapps
fa-medium
fa-medium-m
fa-medkit
fa-medrt
fa-meetup
fa-meh
fa-mercury
fa-microchip
fa-microphone
fa-microphone-alt
fa-microphone-slash
fa-microsoft
fa-minus
fa-minus-circle
fa-minus-hexagon
fa-minus-octagon
fa-minus-square
fa-mix
fa-mixcloud
fa-mizuni
fa-mobile
fa-mobile-alt
fa-mobile-android
fa-mobile-android-alt
fa-modx
fa-monero
fa-money-bill
fa-money-bill-alt
fa-moon
fa-motorcycle
fa-mouse-pointer
fa-music
fa-napster
fa-neuter
fa-newspaper
fa-nintendo-switch
fa-node
fa-node-js
fa-npm
fa-ns8
fa-nutritionix
fa-object-group
fa-object-ungroup
fa-octagon
fa-odnoklassniki
fa-odnoklassniki-square
fa-opencart
fa-openid
fa-opera
fa-optin-monster
fa-osi
fa-outdent
fa-page4
fa-pagelines
fa-paint-brush
fa-palfed
fa-paper-plane
fa-paperclip
fa-paragraph
fa-paste
fa-patreon
fa-pause
fa-pause-circle
fa-paw
fa-paypal
fa-pen
fa-pen-alt
fa-pen-square
fa-pencil
fa-pencil-alt
fa-pennant
fa-percent
fa-periscope
fa-phabricator
fa-phoenix-framework
fa-phone
fa-phone-slash
fa-phone-square
fa-phone-volume
fa-php
fa-pied-piper
fa-pied-piper-alt
fa-pied-piper-pp
fa-pinterest
fa-pinterest-p
fa-pinterest-square
fa-plane
fa-plane-alt
fa-play
fa-play-circle
fa-playstation
fa-plug
fa-plus
fa-plus-circle
fa-plus-hexagon
fa-plus-octagon
fa-plus-square
fa-podcast
fa-poo
fa-portrait
fa-pound-sign
fa-power-off
fa-print
fa-product-hunt
fa-pushed
fa-puzzle-piece
fa-python
fa-qq
fa-qrcode
fa-question
fa-question-circle
fa-question-square
fa-quidditch
fa-quinscape
fa-quora
fa-quote-left
fa-quote-right
fa-racquet
fa-random
fa-ravelry
fa-react
fa-rebel
fa-rectangle-landscape
fa-rectangle-portrait
fa-rectangle-wide
fa-recycle
fa-red-river
fa-reddit
fa-reddit-alien
fa-reddit-square
fa-redo
fa-redo-alt
fa-registered
fa-rendact
fa-renren
fa-repeat
fa-repeat-1
fa-repeat-1-alt
fa-repeat-alt
fa-reply
fa-reply-all
fa-replyd
fa-resolving
fa-retweet
fa-retweet-alt
fa-road
fa-rocket
fa-rocketchat
fa-rockrms
fa-rss
fa-rss-square
fa-ruble-sign
fa-rupee-sign
fa-safari
fa-sass
fa-save
fa-schlix
fa-scribd
fa-scrubber
fa-search
fa-search-minus
fa-search-plus
fa-searchengin
fa-sellcast
fa-sellsy
fa-server
fa-servicestack
fa-share
fa-share-all
fa-share-alt
fa-share-alt-square
fa-share-square
fa-shekel-sign
fa-shield
fa-shield-alt
fa-shield-check
fa-ship
fa-shirtsinbulk
fa-shopping-bag
fa-shopping-basket
fa-shopping-cart
fa-shower
fa-shuttlecock
fa-sign-in
fa-sign-in-alt
fa-sign-language
fa-sign-out
fa-sign-out-alt
fa-signal
fa-simplybuilt
fa-sistrix
fa-sitemap
fa-skyatlas
fa-skype
fa-slack
fa-slack-hash
fa-sliders-h
fa-sliders-h-square
fa-sliders-v
fa-sliders-v-square
fa-slideshare
fa-smile
fa-snapchat
fa-snapchat-ghost
fa-snapchat-square
fa-snowflake
fa-sort
fa-sort-alpha-down
fa-sort-alpha-up
fa-sort-amount-down
fa-sort-amount-up
fa-sort-down
fa-sort-numeric-down
fa-sort-numeric-up
fa-sort-up
fa-soundcloud
fa-space-shuttle
fa-spade
fa-speakap
fa-spinner
fa-spinner-third
fa-spotify
fa-square
fa-square-full
fa-stack-exchange
fa-stack-overflow
fa-star
fa-star-exclamation
fa-star-half
fa-staylinked
fa-steam
fa-steam-square
fa-steam-symbol
fa-step-backward
fa-step-forward
fa-stethoscope
fa-sticker-mule
fa-sticky-note
fa-stop
fa-stop-circle
fa-stopwatch
fa-strava
fa-street-view
fa-strikethrough
fa-stripe
fa-stripe-s
fa-studiovinari
fa-stumbleupon
fa-stumbleupon-circle
fa-subscript
fa-subway
fa-suitcase
fa-sun
fa-superpowers
fa-superscript
fa-supple
fa-sync
fa-sync-alt
fa-table
fa-table-tennis
fa-tablet
fa-tablet-alt
fa-tablet-android
fa-tablet-android-alt
fa-tachometer
fa-tachometer-alt
fa-tag
fa-tags
fa-tasks
fa-taxi
fa-telegram
fa-telegram-plane
fa-tencent-weibo
fa-tennis-ball
fa-terminal
fa-text-height
fa-text-width
fa-th
fa-th-large
fa-th-list
fa-themeisle
fa-thermometer-empty
fa-thermometer-full
fa-thermometer-half
fa-thermometer-quarter
fa-thermometer-three-quarters
fa-thumbs-down
fa-thumbs-up
fa-thumbtack
fa-ticket
fa-ticket-alt
fa-times
fa-times-circle
fa-times-hexagon
fa-times-octagon
fa-times-square
fa-tint
fa-toggle-off
fa-toggle-on
fa-trademark
fa-train
fa-transgender
fa-transgender-alt
fa-trash
fa-trash-alt
fa-tree
fa-tree-alt
fa-trello
fa-triangle
fa-tripadvisor
fa-trophy
fa-trophy-alt
fa-truck
fa-tty
fa-tumblr
fa-tumblr-square
fa-tv
fa-tv-retro
fa-twitch
fa-twitter
fa-twitter-square
fa-typo3
fa-uber
fa-uikit
fa-umbrella
fa-underline
fa-undo
fa-undo-alt
fa-uniregistry
fa-universal-access
fa-university
fa-unlink
fa-unlock
fa-unlock-alt
fa-untappd
fa-upload
fa-usb
fa-usd-circle
fa-usd-square
fa-user
fa-user-alt
fa-user-circle
fa-user-md
fa-user-plus
fa-user-secret
fa-user-times
fa-users
fa-ussunnah
fa-utensil-fork
fa-utensil-knife
fa-utensil-spoon
fa-utensils
fa-utensils-alt
fa-vaadin
fa-venus
fa-venus-double
fa-venus-mars
fa-viacoin
fa-viadeo
fa-viadeo-square
fa-viber
fa-video
fa-vimeo
fa-vimeo-square
fa-vimeo-v
fa-vine
fa-vk
fa-vnv
fa-volleyball-ball
fa-volume-down
fa-volume-mute
fa-volume-off
fa-volume-up
fa-vuejs
fa-watch
fa-weibo
fa-weixin
fa-whatsapp
fa-whatsapp-square
fa-wheelchair
fa-whistle
fa-whmcs
fa-wifi
fa-wikipedia-w
fa-window
fa-window-alt
fa-window-close
fa-window-maximize
fa-window-minimize
fa-window-restore
fa-windows
fa-won-sign
fa-wordpress
fa-wordpress-simple
fa-wpbeginner
fa-wpexplorer
fa-wpforms
fa-wrench
fa-xbox
fa-xing
fa-xing-square
fa-y-combinator
fa-yahoo
fa-yandex
fa-yandex-international
fa-yelp
fa-yen-sign
fa-yoast
fa-youtube
fa-youtube-square

 

  • Like 1

Share this post


Link to post
Share on other sites

thanks for generating that list!

i'm wondering why though the pro is supposed to have 2,316 icons, but this list has 992; and there should be 929 in the new v5 free;

but at least this is a lot more than the core/v4 icons..

Will get back about the hooking into form render to replace inputfield...

Share this post


Link to post
Share on other sites

latest update fixes brands loading, and works in my limited testing (i am able to see all 992 icons in the icon picker.

5a750f00b3d8e_Edit_Template__practice-session__localhost.thumb.jpg.a00c6068b42bb8051e7b70dee665e447.jpg

  • Like 3

Share this post


Link to post
Share on other sites
On 03/02/2018 at 12:48 PM, Macrura said:

i'm wondering why though the pro is supposed to have 2,316 icons, but this list has 992;

I think they're counting each variation of an icon (solid, light, etc) as a separate icon, but these variations use the same class name. Typical marketing stuff to puff up the numbers.

Maybe the brands font should be loaded by default rather than being optional, because if it isn't loaded it leaves unrendered icons in the list which might confuse users about what the problem is.

2018-02-05_104315.png.d0c25124ca102e8146357733815b4f30.png

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.