Add font icon picker, not yet fixed fatal error

app/soapbox/common.js

@@ -4,6 +4,8 @@ import Rails from 'rails-ujs';
 
 export function start() {
   require('fork-awesome/css/fork-awesome.css');
+  require('@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.base-theme.react.css');
+  require('@fonticonpicker/react-fonticonpicker/dist/fonticonpicker.material-theme.react.css');
   require.context('../images/', true);
 
   try {

app/soapbox/features/forms/forkawesome.json

@@ -0,0 +1,822 @@
+{
+  "Web Application Icons": [
+    "fa fa-glass",
+    "fa fa-music",
+    "fa fa-search",
+    "fa fa-envelope-o",
+    "fa fa-heart",
+    "fa fa-star",
+    "fa fa-star-o",
+    "fa fa-user",
+    "fa fa-film",
+    "fa fa-check",
+    "fa fa-times",
+    "fa fa-search-plus",
+    "fa fa-search-minus",
+    "fa fa-power-off",
+    "fa fa-signal",
+    "fa fa-cog",
+    "fa fa-trash-o",
+    "fa fa-home",
+    "fa fa-clock-o",
+    "fa fa-road",
+    "fa fa-download",
+    "fa fa-inbox",
+    "fa fa-refresh",
+    "fa fa-lock",
+    "fa fa-flag",
+    "fa fa-headphones",
+    "fa fa-volume-off",
+    "fa fa-volume-down",
+    "fa fa-volume-up",
+    "fa fa-qrcode",
+    "fa fa-barcode",
+    "fa fa-tag",
+    "fa fa-tags",
+    "fa fa-book",
+    "fa fa-bookmark",
+    "fa fa-print",
+    "fa fa-camera",
+    "fa fa-video-camera",
+    "fa fa-picture-o",
+    "fa fa-pencil",
+    "fa fa-map-marker",
+    "fa fa-adjust",
+    "fa fa-tint",
+    "fa fa-pencil-square-o",
+    "fa fa-share-square-o",
+    "fa fa-check-square-o",
+    "fa fa-arrows",
+    "fa fa-plus-circle",
+    "fa fa-minus-circle",
+    "fa fa-times-circle",
+    "fa fa-check-circle",
+    "fa fa-question-circle",
+    "fa fa-info-circle",
+    "fa fa-crosshairs",
+    "fa fa-times-circle-o",
+    "fa fa-check-circle-o",
+    "fa fa-ban",
+    "fa fa-share",
+    "fa fa-plus",
+    "fa fa-minus",
+    "fa fa-asterisk",
+    "fa fa-exclamation-circle",
+    "fa fa-gift",
+    "fa fa-leaf",
+    "fa fa-fire",
+    "fa fa-eye",
+    "fa fa-eye-slash",
+    "fa fa-exclamation-triangle",
+    "fa fa-plane",
+    "fa fa-calendar",
+    "fa fa-random",
+    "fa fa-comment",
+    "fa fa-magnet",
+    "fa fa-retweet",
+    "fa fa-shopping-cart",
+    "fa fa-folder",
+    "fa fa-folder-open",
+    "fa fa-arrows-v",
+    "fa fa-arrows-h",
+    "fa fa-bar-chart",
+    "fa fa-camera-retro",
+    "fa fa-key",
+    "fa fa-cogs",
+    "fa fa-comments",
+    "fa fa-thumbs-o-up",
+    "fa fa-thumbs-o-down",
+    "fa fa-star-half",
+    "fa fa-heart-o",
+    "fa fa-sign-out",
+    "fa fa-thumb-tack",
+    "fa fa-external-link",
+    "fa fa-sign-in",
+    "fa fa-trophy",
+    "fa fa-upload",
+    "fa fa-lemon-o",
+    "fa fa-phone",
+    "fa fa-square-o",
+    "fa fa-bookmark-o",
+    "fa fa-phone-square",
+    "fa fa-unlock",
+    "fa fa-credit-card",
+    "fa fa-rss",
+    "fa fa-hdd-o",
+    "fa fa-bullhorn",
+    "fa fa-bell-o",
+    "fa fa-certificate",
+    "fa fa-globe",
+    "fa fa-globe-e",
+    "fa fa-globe-w",
+    "fa fa-wrench",
+    "fa fa-tasks",
+    "fa fa-filter",
+    "fa fa-briefcase",
+    "fa fa-users",
+    "fa fa-cloud",
+    "fa fa-flask",
+    "fa fa-square",
+    "fa fa-bars",
+    "fa fa-magic",
+    "fa fa-truck",
+    "fa fa-money",
+    "fa fa-sort",
+    "fa fa-sort-desc",
+    "fa fa-sort-asc",
+    "fa fa-envelope",
+    "fa fa-gavel",
+    "fa fa-tachometer",
+    "fa fa-comment-o",
+    "fa fa-comments-o",
+    "fa fa-bolt",
+    "fa fa-sitemap",
+    "fa fa-umbrella",
+    "fa fa-lightbulb-o",
+    "fa fa-exchange",
+    "fa fa-cloud-download",
+    "fa fa-cloud-upload",
+    "fa fa-suitcase",
+    "fa fa-bell",
+    "fa fa-coffee",
+    "fa fa-cutlery",
+    "fa fa-building-o",
+    "fa fa-fighter-jet",
+    "fa fa-beer",
+    "fa fa-desktop",
+    "fa fa-laptop",
+    "fa fa-tablet",
+    "fa fa-mobile",
+    "fa fa-circle-o",
+    "fa fa-quote-left",
+    "fa fa-quote-right",
+    "fa fa-spinner",
+    "fa fa-circle",
+    "fa fa-reply",
+    "fa fa-folder-o",
+    "fa fa-folder-open-o",
+    "fa fa-smile-o",
+    "fa fa-frown-o",
+    "fa fa-meh-o",
+    "fa fa-gamepad",
+    "fa fa-keyboard-o",
+    "fa fa-flag-o",
+    "fa fa-flag-checkered",
+    "fa fa-terminal",
+    "fa fa-code",
+    "fa fa-reply-all",
+    "fa fa-star-half-o",
+    "fa fa-location-arrow",
+    "fa fa-crop",
+    "fa fa-code-fork",
+    "fa fa-question",
+    "fa fa-info",
+    "fa fa-exclamation",
+    "fa fa-puzzle-piece",
+    "fa fa-microphone",
+    "fa fa-microphone-slash",
+    "fa fa-shield",
+    "fa fa-calendar-o",
+    "fa fa-fire-extinguisher",
+    "fa fa-rocket",
+    "fa fa-anchor",
+    "fa fa-unlock-alt",
+    "fa fa-bullseye",
+    "fa fa-ellipsis-h",
+    "fa fa-ellipsis-v",
+    "fa fa-rss-square",
+    "fa fa-ticket",
+    "fa fa-minus-square",
+    "fa fa-minus-square-o",
+    "fa fa-level-up",
+    "fa fa-level-down",
+    "fa fa-check-square",
+    "fa fa-pencil-square",
+    "fa fa-external-link-square",
+    "fa fa-share-square",
+    "fa fa-compass",
+    "fa fa-caret-square-o-down",
+    "fa fa-caret-square-o-up",
+    "fa fa-caret-square-o-right",
+    "fa fa-sort-alpha-asc",
+    "fa fa-sort-alpha-desc",
+    "fa fa-sort-amount-asc",
+    "fa fa-sort-amount-desc",
+    "fa fa-sort-numeric-asc",
+    "fa fa-sort-numeric-desc",
+    "fa fa-thumbs-up",
+    "fa fa-thumbs-down",
+    "fa fa-female",
+    "fa fa-male",
+    "fa fa-sun-o",
+    "fa fa-moon-o",
+    "fa fa-archive",
+    "fa fa-bug",
+    "fa fa-caret-square-o-left",
+    "fa fa-dot-circle-o",
+    "fa fa-wheelchair",
+    "fa fa-plus-square-o",
+    "fa fa-space-shuttle",
+    "fa fa-envelope-square",
+    "fa fa-university",
+    "fa fa-graduation-cap",
+    "fa fa-language",
+    "fa fa-fax",
+    "fa fa-building",
+    "fa fa-child",
+    "fa fa-paw",
+    "fa fa-spoon",
+    "fa fa-cube",
+    "fa fa-cubes",
+    "fa fa-recycle",
+    "fa fa-car",
+    "fa fa-taxi",
+    "fa fa-tree",
+    "fa fa-database",
+    "fa fa-file-pdf-o",
+    "fa fa-file-word-o",
+    "fa fa-file-excel-o",
+    "fa fa-file-powerpoint-o",
+    "fa fa-file-image-o",
+    "fa fa-file-archive-o",
+    "fa fa-file-audio-o",
+    "fa fa-file-video-o",
+    "fa fa-file-code-o",
+    "fa fa-life-ring",
+    "fa fa-circle-o-notch",
+    "fa fa-paper-plane",
+    "fa fa-paper-plane-o",
+    "fa fa-history",
+    "fa fa-circle-thin",
+    "fa fa-sliders",
+    "fa fa-share-alt",
+    "fa fa-share-alt-square",
+    "fa fa-bomb",
+    "fa fa-futbol-o",
+    "fa fa-tty",
+    "fa fa-binoculars",
+    "fa fa-plug",
+    "fa fa-newspaper-o",
+    "fa fa-wifi",
+    "fa fa-calculator",
+    "fa fa-bell-slash",
+    "fa fa-bell-slash-o",
+    "fa fa-trash",
+    "fa fa-copyright",
+    "fa fa-at",
+    "fa fa-eyedropper",
+    "fa fa-paint-brush",
+    "fa fa-birthday-cake",
+    "fa fa-area-chart",
+    "fa fa-pie-chart",
+    "fa fa-line-chart",
+    "fa fa-toggle-off",
+    "fa fa-toggle-on",
+    "fa fa-bicycle",
+    "fa fa-bus",
+    "fa fa-cc",
+    "fa fa-cart-plus",
+    "fa fa-cart-arrow-down",
+    "fa fa-diamond",
+    "fa fa-ship",
+    "fa fa-user-secret",
+    "fa fa-motorcycle",
+    "fa fa-street-view",
+    "fa fa-heartbeat",
+    "fa fa-server",
+    "fa fa-user-plus",
+    "fa fa-user-times",
+    "fa fa-bed",
+    "fa fa-battery-full",
+    "fa fa-battery-three-quarters",
+    "fa fa-battery-half",
+    "fa fa-battery-quarter",
+    "fa fa-battery-empty",
+    "fa fa-mouse-pointer",
+    "fa fa-i-cursor",
+    "fa fa-object-group",
+    "fa fa-object-ungroup",
+    "fa fa-sticky-note",
+    "fa fa-sticky-note-o",
+    "fa fa-clone",
+    "fa fa-balance-scale",
+    "fa fa-hourglass-o",
+    "fa fa-hourglass-start",
+    "fa fa-hourglass-half",
+    "fa fa-hourglass-end",
+    "fa fa-hourglass",
+    "fa fa-hand-rock-o",
+    "fa fa-hand-paper-o",
+    "fa fa-hand-scissors-o",
+    "fa fa-hand-lizard-o",
+    "fa fa-hand-spock-o",
+    "fa fa-hand-pointer-o",
+    "fa fa-hand-peace-o",
+    "fa fa-trademark",
+    "fa fa-registered",
+    "fa fa-creative-commons",
+    "fa fa-television",
+    "fa fa-calendar-plus-o",
+    "fa fa-calendar-minus-o",
+    "fa fa-calendar-times-o",
+    "fa fa-calendar-check-o",
+    "fa fa-industry",
+    "fa fa-map-pin",
+    "fa fa-map-signs",
+    "fa fa-map-o",
+    "fa fa-map",
+    "fa fa-commenting",
+    "fa fa-commenting-o",
+    "fa fa-shopping-bag",
+    "fa fa-shopping-basket",
+    "fa fa-hashtag",
+    "fa fa-bluetooth",
+    "fa fa-bluetooth-b",
+    "fa fa-percent",
+    "fa fa-universal-access",
+    "fa fa-wheelchair-alt",
+    "fa fa-question-circle-o",
+    "fa fa-blind",
+    "fa fa-audio-description",
+    "fa fa-volume-control-phone",
+    "fa fa-braille",
+    "fa fa-assistive-listening-systems",
+    "fa fa-american-sign-language-interpreting",
+    "fa fa-deaf",
+    "fa fa-sign-language",
+    "fa fa-low-vision",
+    "fa fa-handshake-o",
+    "fa fa-envelope-open",
+    "fa fa-envelope-open-o",
+    "fa fa-address-book",
+    "fa fa-address-book-o",
+    "fa fa-address-card",
+    "fa fa-address-card-o",
+    "fa fa-user-circle",
+    "fa fa-user-circle-o",
+    "fa fa-user-o",
+    "fa fa-id-badge",
+    "fa fa-id-card",
+    "fa fa-id-card-o",
+    "fa fa-thermometer-full",
+    "fa fa-thermometer-three-quarters",
+    "fa fa-thermometer-half",
+    "fa fa-thermometer-quarter",
+    "fa fa-thermometer-empty",
+    "fa fa-shower",
+    "fa fa-bath",
+    "fa fa-podcast",
+    "fa fa-window-maximize",
+    "fa fa-window-minimize",
+    "fa fa-window-restore",
+    "fa fa-window-close",
+    "fa fa-window-close-o",
+    "fa fa-microchip",
+    "fa fa-snowflake-o",
+    "fa fa-mastodon",
+    "fa fa-mastodon-alt",
+    "fa fa-peertube",
+    "fa fa-diaspora",
+    "fa fa-friendica",
+    "fa fa-gnu-social",
+    "fa fa-liberapay-square",
+    "fa fa-liberapay",
+    "fa fa-scuttlebutt",
+    "fa fa-hubzilla",
+    "fa fa-social-home",
+    "fa fa-artstation",
+    "fa fa-discord",
+    "fa fa-discord-alt",
+    "fa fa-key-modern",
+    "fa fa-file-epub",
+    "fa fa-spell-check",
+    "fa fa-moon",
+    "fa fa-sun",
+    "fa fa-biometric",
+    "fa fa-volume-mute",
+    "fa fa-bell-ringing",
+    "fa fa-bell-ringing-o",
+    "fa fa-bunny",
+    "fa fa-cc-by",
+    "fa fa-cc-cc",
+    "fa fa-cc-nc-eu",
+    "fa fa-cc-nc-jp",
+    "fa fa-cc-nc",
+    "fa fa-cc-nd",
+    "fa fa-cc-pd",
+    "fa fa-cc-remix",
+    "fa fa-cc-sa",
+    "fa fa-cc-share",
+    "fa fa-cc-zero",
+    "fa fa-email-bulk",
+    "fa fa-email-bulk-o",
+    "fa fa-skate"
+  ],
+  "Text Editor Icons": [
+    "fa fa-th-large",
+    "fa fa-th",
+    "fa fa-th-list",
+    "fa fa-file-o",
+    "fa fa-repeat",
+    "fa fa-list-alt",
+    "fa fa-font",
+    "fa fa-bold",
+    "fa fa-italic",
+    "fa fa-text-height",
+    "fa fa-text-width",
+    "fa fa-align-left",
+    "fa fa-align-center",
+    "fa fa-align-right",
+    "fa fa-align-justify",
+    "fa fa-list",
+    "fa fa-outdent",
+    "fa fa-indent",
+    "fa fa-link",
+    "fa fa-scissors",
+    "fa fa-files-o",
+    "fa fa-paperclip",
+    "fa fa-floppy-o",
+    "fa fa-list-ul",
+    "fa fa-list-ol",
+    "fa fa-strikethrough",
+    "fa fa-underline",
+    "fa fa-table",
+    "fa fa-columns",
+    "fa fa-undo",
+    "fa fa-clipboard",
+    "fa fa-file-text-o",
+    "fa fa-chain-broken",
+    "fa fa-superscript",
+    "fa fa-subscript",
+    "fa fa-eraser",
+    "fa fa-file",
+    "fa fa-file-text",
+    "fa fa-header",
+    "fa fa-paragraph"
+  ],
+  "Directional Icons": [
+    "fa fa-arrow-circle-o-down",
+    "fa fa-arrow-circle-o-up",
+    "fa fa-chevron-left",
+    "fa fa-chevron-right",
+    "fa fa-arrow-left",
+    "fa fa-arrow-right",
+    "fa fa-arrow-up",
+    "fa fa-arrow-down",
+    "fa fa-chevron-up",
+    "fa fa-chevron-down",
+    "fa fa-hand-o-right",
+    "fa fa-hand-o-left",
+    "fa fa-hand-o-up",
+    "fa fa-hand-o-down",
+    "fa fa-arrow-circle-left",
+    "fa fa-arrow-circle-right",
+    "fa fa-arrow-circle-up",
+    "fa fa-arrow-circle-down",
+    "fa fa-caret-down",
+    "fa fa-caret-up",
+    "fa fa-caret-left",
+    "fa fa-caret-right",
+    "fa fa-angle-double-left",
+    "fa fa-angle-double-right",
+    "fa fa-angle-double-up",
+    "fa fa-angle-double-down",
+    "fa fa-angle-left",
+    "fa fa-angle-right",
+    "fa fa-angle-up",
+    "fa fa-angle-down",
+    "fa fa-chevron-circle-left",
+    "fa fa-chevron-circle-right",
+    "fa fa-chevron-circle-up",
+    "fa fa-chevron-circle-down",
+    "fa fa-long-arrow-down",
+    "fa fa-long-arrow-up",
+    "fa fa-long-arrow-left",
+    "fa fa-long-arrow-right",
+    "fa fa-arrow-circle-o-right",
+    "fa fa-arrow-circle-o-left"
+  ],
+  "Video Player Icons": [
+    "fa fa-play-circle-o",
+    "fa fa-step-backward",
+    "fa fa-fast-backward",
+    "fa fa-backward",
+    "fa fa-play",
+    "fa fa-pause",
+    "fa fa-stop",
+    "fa fa-forward",
+    "fa fa-fast-forward",
+    "fa fa-step-forward",
+    "fa fa-eject",
+    "fa fa-expand",
+    "fa fa-compress",
+    "fa fa-arrows-alt",
+    "fa fa-play-circle",
+    "fa fa-pause-circle",
+    "fa fa-pause-circle-o",
+    "fa fa-stop-circle",
+    "fa fa-stop-circle-o"
+  ],
+  "Brand Icons": [
+    "fa fa-twitter-square",
+    "fa fa-facebook-square",
+    "fa fa-linkedin-square",
+    "fa fa-github-square",
+    "fa fa-twitter",
+    "fa fa-facebook",
+    "fa fa-github",
+    "fa fa-pinterest",
+    "fa fa-pinterest-square",
+    "fa fa-google-plus-square",
+    "fa fa-google-plus",
+    "fa fa-linkedin",
+    "fa fa-github-alt",
+    "fa fa-maxcdn",
+    "fa fa-html5",
+    "fa fa-css3",
+    "fa fa-youtube-square",
+    "fa fa-youtube",
+    "fa fa-xing",
+    "fa fa-xing-square",
+    "fa fa-youtube-play",
+    "fa fa-dropbox",
+    "fa fa-stack-overflow",
+    "fa fa-instagram",
+    "fa fa-flickr",
+    "fa fa-adn",
+    "fa fa-bitbucket",
+    "fa fa-bitbucket-square",
+    "fa fa-tumblr",
+    "fa fa-tumblr-square",
+    "fa fa-apple",
+    "fa fa-windows",
+    "fa fa-android",
+    "fa fa-linux",
+    "fa fa-dribbble",
+    "fa fa-skype",
+    "fa fa-foursquare",
+    "fa fa-trello",
+    "fa fa-gratipay",
+    "fa fa-vk",
+    "fa fa-weibo",
+    "fa fa-renren",
+    "fa fa-pagelines",
+    "fa fa-stack-exchange",
+    "fa fa-vimeo-square",
+    "fa fa-slack",
+    "fa fa-wordpress",
+    "fa fa-openid",
+    "fa fa-yahoo",
+    "fa fa-google",
+    "fa fa-reddit",
+    "fa fa-reddit-square",
+    "fa fa-stumbleupon-circle",
+    "fa fa-stumbleupon",
+    "fa fa-delicious",
+    "fa fa-digg",
+    "fa fa-drupal",
+    "fa fa-joomla",
+    "fa fa-behance",
+    "fa fa-behance-square",
+    "fa fa-steam",
+    "fa fa-steam-square",
+    "fa fa-spotify",
+    "fa fa-deviantart",
+    "fa fa-soundcloud",
+    "fa fa-vine",
+    "fa fa-codepen",
+    "fa fa-jsfiddle",
+    "fa fa-rebel",
+    "fa fa-empire",
+    "fa fa-git-square",
+    "fa fa-git",
+    "fa fa-hacker-news",
+    "fa fa-tencent-weibo",
+    "fa fa-qq",
+    "fa fa-weixin",
+    "fa fa-slideshare",
+    "fa fa-twitch",
+    "fa fa-yelp",
+    "fa fa-paypal",
+    "fa fa-google-wallet",
+    "fa fa-cc-visa",
+    "fa fa-cc-mastercard",
+    "fa fa-cc-discover",
+    "fa fa-cc-amex",
+    "fa fa-cc-paypal",
+    "fa fa-cc-stripe",
+    "fa fa-lastfm",
+    "fa fa-lastfm-square",
+    "fa fa-ioxhost",
+    "fa fa-angellist",
+    "fa fa-meanpath",
+    "fa fa-buysellads",
+    "fa fa-connectdevelop",
+    "fa fa-dashcube",
+    "fa fa-forumbee",
+    "fa fa-leanpub",
+    "fa fa-sellsy",
+    "fa fa-shirtsinbulk",
+    "fa fa-simplybuilt",
+    "fa fa-skyatlas",
+    "fa fa-facebook-official",
+    "fa fa-pinterest-p",
+    "fa fa-whatsapp",
+    "fa fa-medium",
+    "fa fa-medium-square",
+    "fa fa-y-combinator",
+    "fa fa-optin-monster",
+    "fa fa-opencart",
+    "fa fa-expeditedssl",
+    "fa fa-cc-jcb",
+    "fa fa-cc-diners-club",
+    "fa fa-tripadvisor",
+    "fa fa-odnoklassniki",
+    "fa fa-odnoklassniki-square",
+    "fa fa-get-pocket",
+    "fa fa-wikipedia-w",
+    "fa fa-safari",
+    "fa fa-chrome",
+    "fa fa-firefox",
+    "fa fa-opera",
+    "fa fa-internet-explorer",
+    "fa fa-contao",
+    "fa fa-500px",
+    "fa fa-amazon",
+    "fa fa-houzz",
+    "fa fa-vimeo",
+    "fa fa-black-tie",
+    "fa fa-fonticons",
+    "fa fa-reddit-alien",
+    "fa fa-edge",
+    "fa fa-codiepie",
+    "fa fa-modx",
+    "fa fa-fort-awesome",
+    "fa fa-usb",
+    "fa fa-product-hunt",
+    "fa fa-mixcloud",
+    "fa fa-scribd",
+    "fa fa-gitlab",
+    "fa fa-wpbeginner",
+    "fa fa-wpforms",
+    "fa fa-envira",
+    "fa fa-glide",
+    "fa fa-glide-g",
+    "fa fa-viadeo",
+    "fa fa-viadeo-square",
+    "fa fa-snapchat",
+    "fa fa-snapchat-ghost",
+    "fa fa-snapchat-square",
+    "fa fa-first-order",
+    "fa fa-yoast",
+    "fa fa-themeisle",
+    "fa fa-google-plus-official",
+    "fa fa-font-awesome",
+    "fa fa-linode",
+    "fa fa-quora",
+    "fa fa-free-code-camp",
+    "fa fa-telegram",
+    "fa fa-bandcamp",
+    "fa fa-grav",
+    "fa fa-etsy",
+    "fa fa-imdb",
+    "fa fa-ravelry",
+    "fa fa-eercast",
+    "fa fa-superpowers",
+    "fa fa-wpexplorer",
+    "fa fa-meetup",
+    "fa fa-fork-awesome",
+    "fa fa-snowdrift",
+    "fa fa-activitypub",
+    "fa fa-keybase",
+    "fa fa-shaarli",
+    "fa fa-shaarli-o",
+    "fa fa-xmpp",
+    "fa fa-archive-org",
+    "fa fa-freedombox",
+    "fa fa-facebook-messenger",
+    "fa fa-debian",
+    "fa fa-mastodon-square",
+    "fa fa-react",
+    "fa fa-dogmazic",
+    "fa fa-zotero",
+    "fa fa-nodejs",
+    "fa fa-nextcloud",
+    "fa fa-nextcloud-square",
+    "fa fa-hackaday",
+    "fa fa-laravel",
+    "fa fa-gnupg",
+    "fa fa-php",
+    "fa fa-ffmpeg",
+    "fa fa-joplin",
+    "fa fa-syncthing",
+    "fa fa-inkscape",
+    "fa fa-matrix-org",
+    "fa fa-pixelfed",
+    "fa fa-bootstrap",
+    "fa fa-dev-to",
+    "fa fa-hashnode",
+    "fa fa-jirafeau",
+    "fa fa-emby",
+    "fa fa-wikidata",
+    "fa fa-gimp",
+    "fa fa-c",
+    "fa fa-digitalocean",
+    "fa fa-att",
+    "fa fa-gitea",
+    "fa fa-python",
+    "fa fa-archlinux",
+    "fa fa-pleroma",
+    "fa fa-unsplash",
+    "fa fa-hackster",
+    "fa fa-f-droid",
+    "fa fa-wire",
+    "fa fa-tor-onion",
+    "fa fa-hal",
+    "fa fa-jupyter",
+    "fa fa-julia",
+    "fa fa-classicpress",
+    "fa fa-classicpress-circle",
+    "fa fa-open-collective",
+    "fa fa-orcid",
+    "fa fa-researchgate",
+    "fa fa-funkwhale",
+    "fa fa-boardgamegeek",
+    "fa fa-buymeacoffee",
+    "fa fa-conway-glider",
+    "fa fa-csharp",
+    "fa fa-gnu",
+    "fa fa-google-play",
+    "fa fa-heroku",
+    "fa fa-home-assistant",
+    "fa fa-java",
+    "fa fa-mariadb",
+    "fa fa-markdown",
+    "fa fa-mysql",
+    "fa fa-nordcast",
+    "fa fa-plume",
+    "fa fa-postgresql",
+    "fa fa-sass-alt",
+    "fa fa-sass",
+    "fa fa-sketchfab",
+    "fa fa-tex",
+    "fa fa-textpattern",
+    "fa fa-unity",
+    "fa fa-signalapp",
+    "fa fa-askfm",
+    "fa fa-blockstack"
+  ],
+  "Medical Icons": [
+    "fa fa-user-md",
+    "fa fa-stethoscope",
+    "fa fa-hospital-o",
+    "fa fa-ambulance",
+    "fa fa-medkit",
+    "fa fa-h-square",
+    "fa fa-plus-square"
+  ],
+  "Currency Icons": [
+    "fa fa-eur",
+    "fa fa-gbp",
+    "fa fa-usd",
+    "fa fa-inr",
+    "fa fa-jpy",
+    "fa fa-rub",
+    "fa fa-krw",
+    "fa fa-try",
+    "fa fa-ils",
+    "fa fa-viacoin",
+    "fa fa-gg",
+    "fa fa-gg-circle"
+  ],
+  "Payment Icons": [
+    "fa fa-btc",
+    "fa fa-credit-card-alt",
+    "fa fa-patreon",
+    "fa fa-ethereum",
+    "fa fa-tipeee"
+  ],
+  "Gender Icons": [
+    "fa fa-venus",
+    "fa fa-mars",
+    "fa fa-mercury",
+    "fa fa-transgender",
+    "fa fa-transgender-alt",
+    "fa fa-venus-double",
+    "fa fa-mars-double",
+    "fa fa-venus-mars",
+    "fa fa-mars-stroke",
+    "fa fa-mars-stroke-v",
+    "fa fa-mars-stroke-h",
+    "fa fa-neuter",
+    "fa fa-genderless"
+  ],
+  "Transportation Icons": [
+    "fa fa-train",
+    "fa fa-subway"
+  ],
+  "Soapbox Icons": [
+    "fa fa-fediverse",
+    "fa fa-spinster"
+  ]
+}

app/soapbox/features/forms/index.js

@@ -7,6 +7,8 @@ import { SketchPicker } from 'react-color';
 import Overlay from 'react-overlays/lib/Overlay';
 import { isMobile } from '../../is_mobile';
 import detectPassiveEvents from 'detect-passive-events';
+import FontIconPicker from '@fonticonpicker/react-fonticonpicker';
+import forkAwesomeIcons from './forkawesome.json';
 
 const FormPropTypes = {
   label: PropTypes.oneOfType([
@@ -192,6 +194,38 @@ export class RadioGroup extends ImmutablePureComponent {
 
 }
 
+export class IconPicker extends ImmutablePureComponent {
+
+  static propTypes = {
+    icons: PropTypes.object,
+    label: FormPropTypes.label,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    icons: forkAwesomeIcons,
+    placeholder: 'Select icon',
+  };
+
+  render() {
+    const { icons, onChange, value, label, placeholder } = this.props;
+
+    return (
+      <div className='input with_label popup'>
+        <div className='label_input__icon_picker'>
+          {label && (<label>{label}</label>)}
+          <div className='label_input__wrapper'>
+            <FontIconPicker icons={icons} onChange={onChange} value={value} noSelectedPlaceholder={placeholder} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}
+
 export class ColorPicker extends React.PureComponent {
 
   static propTypes = {

app/soapbox/features/soapbox_config/index.js

@@ -14,6 +14,7 @@ import {
   SimpleTextarea,
   ColorWithPicker,
   FileChooserLogo,
+  IconPicker,
 } from 'soapbox/features/forms';
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 import { updateAdminConfig } from 'soapbox/actions/admin';
@@ -58,6 +59,7 @@ class SoapboxConfig extends ImmutablePureComponent {
     soapbox: this.props.soapbox,
     rawJSON: JSON.stringify(this.props.soapbox, null, 2),
     jsonValid: true,
+    iconValue: 'fa fa-pleroma',
   }
 
   setConfig = (path, value) => {
@@ -141,6 +143,10 @@ class SoapboxConfig extends ImmutablePureComponent {
     );
   };
 
+  handleIconChange = (value) => {
+    this.setState({ iconValue: value });
+  }
+
   handleHomeFooterItemChange = (index, key, field) => {
     return this.handleItemChange(
       ['navlinks', 'homeFooter', index], key, field, templates.footerItem
@@ -242,7 +248,7 @@ class SoapboxConfig extends ImmutablePureComponent {
             </FieldsGroup>
             <FieldsGroup>
               <div className='fields-row__column fields-group'>
-                <div className='input with_block_label'>
+                <div className='input with_block_label popup'>
                   <label><FormattedMessage id='soapbox_config.fields.promo_panel_fields_label' defaultMessage='Promo panel items' /></label>
                   <span className='hint'>
                     <FormattedMessage id='soapbox_config.hints.promo_panel_fields' defaultMessage='You can have custom defined links displayed on the left panel of the timelines page.' />
@@ -253,11 +259,11 @@ class SoapboxConfig extends ImmutablePureComponent {
                   {
                     soapbox.getIn(['promoPanel', 'items']).map((field, i) => (
                       <div className='row' key={i}>
-                        <TextInput
+                        <IconPicker
                           label={intl.formatMessage(messages.promoItemIcon)}
                           placeholder={intl.formatMessage(messages.promoItemIcon)}
                           value={field.get('icon')}
-                          onChange={this.handlePromoItemChange(i, 'icon', field)}
+                          onChange={this.handleIconChange}
                         />
                         <TextInput
                           label={intl.formatMessage(messages.promoItemLabel)}

app/styles/fonts.scss

@@ -159,12 +159,12 @@
   font-style: normal;
 }
 
-.fa-users::before {
-  font-family: 'ForkAwesome';
-  content: '\f0c0';
-}
-
 .fa-fediverse::before {
-  font-family: 'soapbox' !important;
+  font-family: 'soapbox';
   content: "\e901";
 }
+
+.fa-spinster::before {
+  font-family: 'soapbox';
+  content: "\e900";
+}

app/styles/forms.scss

@@ -262,6 +262,10 @@ code {
     }
   }
 
+  .input.popup {
+    overflow: visible;
+  }
+
   .input.radio_buttons .radio label {
     margin-bottom: 5px;
     font-family: inherit;
@@ -309,7 +313,8 @@ code {
   input[type=number],
   input[type=email],
   input[type=password],
-  textarea {
+  textarea,
+  .rfipbtn {
     box-sizing: border-box;
     font-size: 16px;
     color: var(--primary-text-color);
@@ -342,6 +347,11 @@ code {
     }
   }
 
+  .rfip {
+    width: 100%;
+    margin: 0;
+  }
+
   input[type=text][disabled],
   input[type=number][disabled],
   input[type=email][disabled],
@@ -466,6 +476,48 @@ code {
       }
     }
 
+    &__icon_picker {
+      font-size: 14px;
+
+      label {
+        display: block;
+        margin-bottom: 8px;
+      }
+
+      .rfipbtn {
+        display: inline-flex;
+        line-height: 19px;
+        min-height: 19px;
+        padding: 0;
+
+        &__icon {
+          margin: 3.5px 0 3.5px 10px;
+        }
+
+        &__icon--empty {
+          text-transform: none;
+          font-style: normal;
+          color: var(--primary-text-color--faint);
+          font-size: 16px;
+          line-height: 15px;
+          padding: 10px;
+        }
+
+        &__current {
+          flex: 0;
+        }
+
+        &--default:active, &--default:focus {
+          box-shadow: none;
+        }
+
+        &__button {
+          border-top-right-radius: inherit;
+          border-bottom-right-radius: inherit;
+        }
+      }
+    }
+
     &__wrapper {
       position: relative;
     }
@@ -1000,7 +1052,7 @@ code {
   color: $error-red;
 }
 
-.input .row .fa-times-circle {
+.input .row > .fa-times-circle {
   position: absolute;
   right: 7px;
   cursor: pointer;

package.json

@@ -46,6 +46,7 @@
     "@babel/preset-react": "^7.0.0",
     "@babel/runtime": "^7.3.4",
     "@clusterws/cws": "^0.16.0",
+    "@fonticonpicker/react-fonticonpicker": "^1.2.0",
     "array-includes": "^3.0.3",
     "autoprefixer": "^9.5.1",
     "axios": "^0.19.0",

yarn.lock

@@ -1187,6 +1187,11 @@
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
   integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==
 
+"@fonticonpicker/react-fonticonpicker@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@fonticonpicker/react-fonticonpicker/-/react-fonticonpicker-1.2.0.tgz#cbcb898f3d788ef50d7090fe623afe2e8e5eb1d7"
+  integrity sha512-I7U4VNIpwJHnOaWq1v2MSuaUTxPiur/MYG4B1hr+FWI1O7k+tTym1ysdAyfp7YbEdF4Q8TYoY5Q2hbTmhQeTSQ==
+
 "@formatjs/intl-displaynames@^2.2.4":
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/@formatjs/intl-displaynames/-/intl-displaynames-2.2.4.tgz#c85d59b0d157470347fdfe86fb8fba7da998ebe1"