Implementando ícones Glyph com Angular

Leia a história de fundo ou vá direto para os produtos, rolando para baixo até “Processo de implementação” …

No projeto mais recente da minha equipe, usamos um conjunto de ícones de glifo personalizado pela primeira vez. Isso foi especialmente legal para mim porque, por volta de 2003-2006, eu estava fazendo todas as coisas de branding e web para um acampamento de snowboard, e os ícones eram uma grande parte de nossos esforços de branding. A cada ano, o acampamento funcionava com uma estética inteiramente nova, o que era incrível porque fornecia um feedback rápido. Naquela época, era difícil usar muitas imagens em uma página porque isso tornava tudo muito lento, mas aprendemos que os ícones eram incrivelmente valiosos em uma estética. Os ícones eram enormes para a identidade da marca. Então, fiquei animado quando parte da minha função neste último projeto foi trabalhar na implementação de ícones de glifo.

Para ver os ícones em ação no branding, confira esses recursos. Os dois primeiros são listas de sites onde os ícones são empregados como um componente-chave da imagem da empresa e realmente ajudam a definir a estética. Os segundos dois são sobre glifos.

• Meus favoritos pessoais são Noobshibe, Saharanista, Washu Washu Design e Neighbourhood Press.
  http://www.wix.com/blog/2014/03/icons-in-web-design/

• Desta coleção, gosto de Moredays, Peter Nappi e Worry Free Labs.
  http://webdesignledger.com/inspiration/20-excellent-examples-of-icon-usage-in-web-design

• Aqui está uma página legal onde você pode aprender sobre todo o pensamento que entra em um ícone. Eles são criaturinhas bastante complexas.
  http://www.google.com/design/spec/style/icons.html#

• Nosso designer criou um conjunto de ícones de glifo usando Fontastic. É uma ótima maneira de adicionar ícones vetoriais ao seu site. http://fontastic.me/

Em primeiro lugar, a resposta à grande questão – por que você deseja usar um ícone de glifo? Aqui estão algumas razões:

• Os ícones glifos são leves e responsivos
• Você pode usar CSS para alterar o tamanho, o alinhamento e a cor de um ícone
• Você pode facilmente adicionar sombras projetadas ou bordas a todos os seus ícones de glifo, assim como a apenas um
• Chega de abrir o Photoshop o tempo todo
• Ícones de glifo são fáceis de animar

*** Se você quiser ter uma ideia legal de todas as coisas que você pode fazer com um ícone, verifique FontAwesome do Bootstrap:
http://fortawesome.github.io/Font-Awesome/examples/ ***

PROCESSO DE IMPLEMENTAÇÃO:

O que fizemos e por que fizemos …

• Primeiro, nosso designer nos fez um conjunto de ícones usando http://fontastic.me/
• O conjunto de arquivos incluiu uma folha de estilo e mapas de ícones para todos os navegadores.
• Em seguida, colocamos esses arquivos em nosso projeto e importamos a folha de estilo para o nosso arquivo LESS principal
• Em seguida, modificamos a folha de estilo da fonte para ter o CSS que pensamos ser o melhor para o nosso projeto. Mudamos principalmente apenas o tamanho da fonte. Percebemos que não fazia sentido definir a altura da linha ali porque lugares diferentes precisavam de alturas de linha diferentes para centralizar.

Para que nosso primeiro glifo apareça na página, simplesmente referenciamos o glifo como uma classe em nosso documento html. Ex:

<i class="fa fa-whatsapp"></i>

É uma prática recomendada colocar ícones de glifo em i-classes em vez de divs ou spans. Uma i-class é um elemento embutido, assim como um span. Na verdade, porém, é apenas uma convenção. Como o uso de uma i-tag para itálico saiu de moda, a i-tag foi apropriada para ícones de glifo porque o “i” convenientemente poderia representar o “i” no “ícone”.

Então, se quiséssemos estilizar o glifo para o contexto, tudo o que tínhamos que fazer era adicionar um segundo nome de classe à i-class.

<i class="fa fa-whatsapp journal-glyph-icon-round"></i>

Mais empolgante multiuso – queríamos que os ícones fossem redondos e tivessem um fundo colorido, então escrevemos um mixin que poderíamos usar em vários ícones. O mixin nos deu a circularidade e o alinhamento, então definimos a cor de forma diferente em lugares diferentes.

.RoundIcon (@diameter) {
  border-radius: @diameter;
  -moz-border-radius: @diameter;
  -webkit-border-radius: @diameter;
  margin-left: (@diameter /2) * -1px;
  height: @diameter;
  width: @diameter;
  background-position: center center;
  z-index: 100;
  display: inline;
  vertical-align: middle;
  overflow: hidden;
  text-align: center;
  position: absolute;
  top:50%;
  margin-top: (@diameter/2) * -1px;
}

Em nosso caso, a próxima coisa que queríamos era ser capaz de exibir ícones diferentes com base no que estava sendo extraído do banco de dados. Por exemplo, quando um usuário selecionava “e-mail”, queríamos que um ícone de e-mail aparecesse, e quando um usuário selecionava “telefone”, queríamos que um ícone de telefone aparecesse. Assim, em nosso banco de dados, atribuímos um slug a cada um dos modos de comunicação possíveis (e-mail, telefone, fax, presencial, etc). Para criar essa funcionalidade, usamos a interpolação angular. (* veja atualização na parte inferior)

Aqui está o que parecia na visualização (também conhecido como nosso modelo html):

<i class="{{ journalEntry.modeIcon() }}"></i>

Isso insere os resultados da função modeIcon na tag CSS. Depois que a função é executada, a linha é efetivamente lida da seguinte forma (porque a função envia uma string para a classe).

<i class="rubiconglyph-circle-slug"></i>

Esta string faz referência à regra da classe e, hooray, temos o estilo correspondente!

.mode-icon i:before {
 border-radius: ((@modeIconSize / 2) * 1px);
 border: (@modeIconSize * .07) * 1px solid @border-color-light;
 font-size: (@modeIconSize * .75) * 1px;
 line-height: @modeIconSize;
}

Agora podemos rastrear essa função de volta ao modelo e verificar o código javascript:

  modeIcon: function() {
    if (!this.mode || !this.mode.slug) {
      return "";
    }
    return "rubiconglyph-circle" + "-" + this.mode.slug ;
  }
});

Basicamente, esse código diz, se não houver um modo ou se não houver um slug para o modo, retorne uma string vazia (dessa forma, a classe ficará em branco). Caso contrário, anexe “this.mode.slug” ao final de “rubiconglyph-circle”.

Então, o que acontece se você quiser que a cor do glifo também mude à vontade com base nos dados? Ha, nós podemos fazer isso também. Confira a dica profissional, “Retornando Strings para Fazer Algum CSS Acontecer”. Você também pode gostar, <a href = ” https://coderwall.com/p/mxk-gw/if-there-is-no-profile-image-show-a-placeholder-glyph-icon-using-angular? p = 1 & q = author% 3Akkiger “>” Se não houver imagem de perfil, mostre um ícone glifo de espaço reservado usando angular “</a>

* A interpolação angular não é ideal. Aqui está um êmbolo para mostrar o porquê. Ele cai em um erro de ciclo de resumo muito rapidamente. http://plnkr.co/edit/F7HEX4bybWiHVqMNyVKg?p=preview Uma alternativa – Configure os valores padrão dentro do controlador para que a qualquer momento o DOM precise apenas fazer referência a um objeto, em vez de chamar uma função. A partir daí, a interação do usuário acionaria uma referência de função que atualizaria o estado desse objeto.