FontAwesome iconpicker em campo do form

Formulários
#1

Eu precisava implementar um FontAwesome iconpicker igual ao do SC em um form.
Seguem os passos que fiz para implementar:

Se seu SC já tiver uma biblioteca externa pública “fontawesome-iconpicker”, pule para o passo 2.
Eu fiz tanto teste que não lembro se já veio no SC ou se eu mesmo havia criado e não lembro.
No exemplo usei uma apl tipo controle, campo texto chamado “classe” com 20 caracteres.

Passo 1: a biblioteca
Crie uma biblioteca externa pública chamada “fontawesome-iconpicker” e marque para usar no projeto. Abra a biblioteca e importe 2 arquivos que já vem no próprio SC. No meu caso, achei eles em
“devel/lib/third/bootstrap_plugin/fontawesome-iconpicker-3.0.0/dist/js/fontawesome-iconpicker.min.js”
e
“devel/lib/third/bootstrap_plugin/fontawesome-iconpicker-3.0.0/dist/css/fontawesome-iconpicker.min.css”

Passo 2: usar na aplicação tipo form ou controle
Capture o id do campo que deseja adicionar o picker, no meu exemplo usei um campo chamado “classe”, então seu id é “#id_sc_field_classe”.

No onLoad do form cole o código:


?>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <link rel="stylesheet" href="../_lib/libraries/sys/fontawesome-iconpicker/fontawesome-iconpicker.min.css">

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="../_lib/libraries/sys/fontawesome-iconpicker/fontawesome-iconpicker.min.js"></script>

 <script>
   $(document).ready(function() {
     const $campo = $('#id_sc_field_classe');

     $campo.iconpicker({
       placement: 'bottomRight',
       animation: true,
       hideOnSelect: true,
       inputSearch: true,
       templates: {
         search: '<input type="search" class="form-control iconpicker-search" placeholder="Buscar ícone...">'
       }
     });

     $campo.on('iconpickerSelected', function(event){
       $campo.val(event.iconpickerValue);
     });
   });
 </script>
 <?php

Lembre de alterar a linha “const $campo = $(’#id_sc_field_classe’);” para conter o id do seu campo.
Ao executar, basta dar um clique no campo para abrir o picker, exatamente como o SC usa.
Digitando dentro do campo ele filtra os ícones igual no SC.

Resultado:
image

Ao clicar no campo:
image

Não sou nenhum mestre do JS e fui preguiçoso usando CDN também, é só adaptar pra sua necessidade.
No meu caso, estou fazendo uma aplicação de menu usando blank, e irei implementar uma barra de atalhos (similar a que existe na aplicação de menu), só que dinâmica, com aplicações e ícones cadastrados em tabela e exibidos conforme o módulo de segurança (próprio também). Por isso precisava do iconpicker.

@Danilo_Lima a gente tem o campo “cor html”, poderíamos ter um “fontawesome picker” nativo também rsrs.