Pergunta

Eu não consigo descobrir o porquê de tipo de Letra Incrível ícones não estão aparecendo no meu cordova app.

Eu baixei todo o tipo de letra incrível pasta e copiá-lo para o meu projeto da pasta.Eu incluí a pasta com:

<link rel="stylesheet" href="../font-awesome-4.1.0/css/font-awesome.min.css">

Estou certo de que isso é correto porque <i class="fa fa-bars fa-2x"></i> vai apresentar no chrome perfeitamente bem.

No entanto, quando eu executar cordova emulate android os ícones não aparecem no meu emulador de android.

Então eu tentei seguir a resolução aqui: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

Parece que a resolução de problemas acha que isso é um erro relacionado com o text-rendering, mas quando eu adicionar text-rendering: auto; para .fa { } em ambos os minified e o total css, ainda não vejo os ícones no meu emulador de android.

Eu estou em uma perda sobre o que fazer.Meu android alvo do projeto é 4.4.2 api do nível 19.Alguém pode me ajudar?

Aqui está a seção html relacionadas aos ícones.

<body> 
    <div id="main">
           <div id="top">
               <i id="settings" class="fa fa-bars fa-2x"></i>
               <p id="logo" > Chowza Inc </p>
          </div>
    </div>
...
</body>
Foi útil?

Solução 2

respondendo minha própria pergunta ...

Eu copiei a pasta Fontawesome na pasta do meu projeto, mas ao usar o cordova emulate android a pasta Font Awesome não estava sendo construída.Copiando a pasta Fontawesome para a pasta CSS e alterar os caminhos de link relacionados corrigiu esse problema.

Outras dicas

Eu tive o mesmo problema no android 4.0.3 cordova app.No meu caso eu tive que remover parâmetro de versão (v=4.1.0) a partir do url.Por exemplo:

Bloco antigo na fonte-impressionante.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Novo bloco na fonte-impressionante.css

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot');
  src: url('../fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf') format('truetype'), url('../fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top