All for Joomla All for Webmasters
Ionic Framework

Ionic Framework [2|3]: Melhor prática para adicionar o Font Awesome

O Font Awesome é referência de uso pelos designers dentre as bibliotecas de ícones e compõe hoje boa parte dos temas disponíveis. Uma vez que o Ionic é um framework baseado em webview, a biblioteca também pode ser utilizada em suas aplicações mobile. A grande dúvida dos desenvolvedores é sobre a melhor prática para incluir o Font Awesome em seu app e neste post vou tentar esclarecer um pouco dessa confusão.

São basicamente 3 passos para a inclusão da biblioteca:

  1. Instalar o pacote npm do Font Awesome
  2. Na seção  <head>  do seu index.html , referenciar a localização do font-awesome.min.css 
  3. Adicionar um Copy Script customizado

1. Instalar o pacote npm

Execute o comando abaixo na pasta do seu projeto. Isso vai adicionar o Font Awesome à pasta node_modules  do nodejs. A opção --save  vai incluir o pacote nas dependências do seu arquivo package.json  automaticamente.

 

2. Na seção <head> do seu index, referenciar font-awesome.min.css

Localize o arquivo index.html na sua pasta src  do projeto e adicione a referência abaixo na seção <head> do arquivo. Note que o caminho descrito ainda não existe, mas será criado no passo 3.

 

3. Adicionar um Copy Script customizado

O Ionic inclui um arquivo copy script que é chamado durante o processo de compilação quando você executa ionic serve e é responsável por mover alguns resources da pasta node_modules  para a pasta www . a Localização do script é demonstrada abaixo:

Nós vamos fazer uma cópia desse arquivo, nomeá-lo copy-custom-libs.js e colocá-lo em uma nova pasta chamada scripts na raiz do seu projeto:

Ao adicionarmos as entradas do Font Awesome ao script, ele deve ficar da seguinte forma:

Por último, nós precisamos instruir o ionic que nós queremos usar o novo arquivo que criamos em vez do que é usado por padrão. Para isso, adicionamos a opção de config abaixo no arquivo package.json:

Após as alterações, o arquivo deve ficar no formato abaixo:

image-title-here

E isso é o suficiente para que sua aplicação suporte os ícones do Font Awesome. Você pode incluir as tags dos ícones que quer utilizar em seu projeto e executar o comando ionic serve  normalmente. Quaisquer dúvidas ou sugestões, utilize a área de comentários ou entre em contato!


Fonte: https://luiscabrera.site/tech/2017/01/09/fontawesome-in-ionic2.html

Você Também Pode Gostar

Nenhum Comentário

Deixe uma Resposta