Adicione ícones personalizados à fonte impressionante

eu amo o fonte do ícone Font Awesome e quero usá-la na maioria dos ícones do meu site, mas existem alguns ícones svg personalizados que eu precisaria além do que é oferecido.

Notei que a versão .svg do Font Awesome é composta principalmente destes <glyph />elementos:

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="&#xf0c0;" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="&#xf0c1;" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...

Seria eficaz pegar meu código de ícone svg, colá-lo como um novo elemento de glifo e atribuir um caractere unicode não utilizado?

Experimente o Icomoon . Você pode fazer upload de seus próprios SVGs, adicioná-los à biblioteca e criar uma fonte personalizada combinando FontAwesome com seus próprios ícones.

Você pode experimentar o fontcustom , ele cria sua própria fonte a partir de arquivos svg.

No Font Awesome 5, você pode criar ícones personalizados com seus próprios dados SVG. Aqui está um repositório demo do GitHub com o qual você pode jogar. E aqui está um CodePen que mostra como algo semelhante pode ser feito em <script>blocos.

Em qualquer um dos casos, simplesmente envolve o uso library.add()para adicionar um objeto como este:

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

Observe que o elemento rotulado pelo comentário "svg path data" no exemplo de código é o que será atribuído como o valor do datributo em um <path>elemento que é filho do <svg>. Assim (deixando de fora alguns detalhes para maior clareza):

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

(Adaptado da minha resposta semelhante aqui: https://stackoverflow.com/a/50338775/4642871 )

Depende do que você tem. Se o seu ícone svg é apenas um caminho, é fácil adicionar esse glifo apenas copiando o atributo 'd' para um novo elemento <glyph>. No entanto, o caminho precisa ser redimensionado para o sistema de coordenadas da fonte (o quadrado EM, que normalmente é [0,0,2048,2048] - o padrão para fontes Truetype) e alinhado com a linha de base desejada.

No entanto, nem todos os navegadores suportam fontes svg, então você também precisará convertê-lo para outros formatos, se quiser que ele funcione em qualquer lugar.

O Fontforge pode importar arquivos svg (selecione um slot de glifo, Arquivo> Importar e, em seguida, selecione sua imagem svg), e você poderá converter para todos os formatos de fonte relevantes (svg, truetype, woff etc.).

Sugiro manter seus ícones separados do FontAwesome e criar e manter sua própria biblioteca personalizada. Pessoalmente, acho que é muito mais fácil manter o FontAwesome separado se você estiver criando sua própria biblioteca de ícones. Você pode carregar o FontAwesome em seu site a partir de uma CDN e nunca precisar se preocupar em mantê-lo atualizado.

Ao criar seus próprios ícones personalizados, crie cada ícone via Adobe Illustrator ou software similar. Depois que seus ícones forem criados, salve cada um individualmente no SVGformato do seu computador.

Em seguida, acesse o IcoMoon : http://icomoon.io , que possui o melhor software de geração de fontes (na minha opinião), e é gratuito. IcoMoon lhe permitirá importar suas fontes individuais salva-SVG em uma biblioteca de fontes, em seguida, gerar o seu ícone personalizado biblioteca glifo em eot, ttf, woff, e svg. Um formato que o IcoMoon não gera é woff2.

Depois de gerar seu pacote de ícones no IcoMoon , acesse o FontSquirrel : http://fontsquirrel.com e use o gerador de fontes. Use seu ttfarquivo gerado no IcoMoon . No recém-criado pacote de ícones criado, agora você terá seu pacote de ícones em woff2formato.

Verifique se os arquivos para eot, ttf, svg, woff, ewoff2 são todos do mesmo nome. Você está gerando um pacote de ícones a partir de dois sites / software diferentes, e os nomes das saídas geradas são diferentes.

Você terá CSS gerado para o seu pacote de ícones nos dois locais. Mas o CSS gerado no IcoMoon não incluirá o woff2formato na sua @font-face {}declaração. Certifique-se de adicionar isso ao adicionar seu CSS ao seu projeto:

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

Lembre-se de que você pode obter os valores de unicode de glifo de cada ícone no seu pacote de ícones usando o software IcoMoon . Esses valores podem ser úteis na atribuição de seus ícones via CSS, como em (assumindo que estamos usando o font-familydeclarado no exemplo @font-face {...}acima):

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

Você também pode obter o valor unicode do glifo e953se abrir o svgarquivo gerado pelo pacote de fontes em um editor de texto. Por exemplo:

<glyph unicode="&#xe953;" glyph-name="eye" ... />

Abordagem semelhante a @ Samuel-bergström:

• Baixe o Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
• Faça o download do FontForge http://fontforge.github.io/en-US/downloads/
• Download do Inkscape
• Abra o Inskscape e crie uma forma de camada única como seu novo ícone de fonte
• Salvar arquivo SVG, Fechar o Inkscape
• Abra o FontForge (se você tiver vários monitores, use o Windows-LeftArrow, para reposicionar, pois eles têm janelas java SWING estranhas que se apagam do monitor e têm problemas modais com pop-ups - tive que verificar alguns na barra de tarefas)
• Arquivo | Abra fontawesome-webfont.svg
• Arquivo | Importar
• Role até o final, clique com o botão direito no ícone | Informações sobre o glifo
• Atualize o nome do glifo para uniFXXX (XXX é algo como 501, um número maior que o Unicode mais alto usado na versão 4.5 do FontAwesome)
• Unicode Vlaue U + fXXX
• Clique OK
• Arquivo | Salve 
• Arquivo | Gerar fontes ...
• Fechar FontForge
• Abra seu projeto da web
• Copie seus arquivos de fonte para a pasta "\ Content \ fonts \" (no meu projeto).
• Edite "\ Content \ styles \ fa \ path.less" para ter a seguinte aparência:

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

Sei que pode ser "controverso" comentar outros tipos de arquivo, mas fico feliz em saber como gerar arquivos .eot ou .otf nos comentários.

• e, finalmente, como Samuel menciona, atualize seu CSS / LESS com:

  .fa-XXX: antes de {content: "\ f501"; }

Eu pesquisei um pouco sobre as fachadas da Web SVG e a criação de fontes. Aos meus olhos, se você quiser "adicionar" fontes a fontes já existentes, incríveis, você precisa fazer o seguinte:

vá para o inkscape e crie um glifo, salve-o como SVG para poder ler o código, atribua a ele um caractere unicode que não seja usado atualmente, para que não entre em conflito com nenhum dos glifos existentes na fonte. isso pode ser difícil, então eu acho que um aplicador melhor e mais simples seria substituir um glifo existente pelo seu (basta escolher um que você não use, copie a primeira parte:

Salve o svg e depois converta-o em fonte da web usando qualquer conversor online para que o seu webfont funcione em todos os navegadores.

Uma vez feito isso, você deve ter um SVG com um dos glifos substituídos; nesse caso, você está pronto. caso contrário, você precisa criar o CSS para seu novo glifo. Nesse caso, tente reutilizar o CSS existente dos FAs e adicione apenas

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}

Se você quiser alguns ícones (ou todos) de fontes incríveis, incluindo os ícones svg personalizados, você pode:

1- Vá para http://fontawesome.io/ Faça o download do zip e extraia-o, por exemplo, na sua área de trabalho.

2- Vá para http://fontastic.me/ use seu email para criar uma conta.

3- Após o login, clique na opção do cabeçalho: Adicionar mais ícones.

4- Selecione o SVG de font-awesome localizado no zip extraído dentro das fontes.

5- Repita o processo carregando seus próprios arquivos svg.

6- Inside Home (no cabeçalho da página) Selecione os ícones que deseja baixar, personalize-os para dar seus nomes personalizados e selecione publicar para ter um link ou faça o download das fontes e css.

Desculpe meu ingles ! : D