Home
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:
- Instalar o pacote npm do Font Awesome
- Na seção
<head> do seu
index.html , referenciar a localização do
font-awesome.min.css - 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.
|
1 |
npm install --save font-awesome |
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.
|
1 2 |
<!-- Font-awesome --> <link href="assets/css/font-awesome.min.css" rel="stylesheet"/> |
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:
|
1 2 3 4 5 6 7 |
fontawesomeapp/ ├── node_modules/ │ ├── @ionic │ │ ├── app-scripts │ │ │ ├── config │ │ │ │ └── copy.config.js |
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:
|
1 2 3 |
fontawesomeapp/ ├── scripts/ │ └── copy-custom-libs.js |
Ao adicionarmos as entradas do Font Awesome ao script, ele deve ficar da seguinte forma:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const existingConfig = require('../node_modules/@ionic/app-scripts/config/copy.config'); module.exports = Object.assign(existingConfig, { copyFontawesomeFonts: { src: ['{{ROOT}}/node_modules/font-awesome/fonts/**/*'], dest: '{{WWW}}/assets/fonts' }, copyFontawesomeCss: { src: ['{{ROOT}}/node_modules/font-awesome/css/font-awesome.min.css'], dest: '{{WWW}}/assets/css' } } ); |
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:
|
1 2 3 |
"config": { "ionic_copy": "./scripts/copy-custom-libs.js" } |
Após as alterações, o arquivo deve ficar no formato abaixo:
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
1 Comentário
Sannytet
11 de dezembro de 2018 at 19:09Nice posts! 🙂
___
Sanny