Adicione icons personalizados à fonte incrível

Eu amo a fonte do ícone Font Awesome e quero usá-lo para a maioria dos icons no meu site, mas existem alguns icons svg personalizados que eu preciso, além do que é oferecido.

Percebi que a versão .svg do Font Awesome é composta principalmente por esses elementos :

 ...    ... 

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

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

    Você poderia dar fontcustom um ir, ele cria sua própria fonte de arquivos svg.

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

    Nem todos os navegadores suportam fonts svg, então você terá que convertê-lo para outros formatos também se quiser que ele funcione em qualquer lugar.

    O Fontforge pode importar arquivos svg (selecionar um slot de glifo, Arquivo> Importar e depois selecionar sua imagem svg), e então você pode converter para todos os formatos de fonte relevantes (svg, truetype, woff etc).

    Abordagem semelhante a @ Samuel-bergström:

    • Baixar SVG Fontawesome https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
    • Baixar FontForge http://fontforge.github.io/pt-BR/downloads/
    • Baixar Inkscape
    • Abra o Inskscape e crie uma forma de camada única como seu novo ícone de fonte
    • Salvar arquivo SVG, Close Inkscape
    • Open FontForge (Se você tiver vários monitores, use o Windows-LeftArrow, para reposicionar, pois eles têm estranhas janelas java SWING que ficam fora do monitor e têm problemas modais com pop-ups – eu tive que verificar minha barra de tarefas para alguns)
    • Arquivo | Abrir fontawesome-webfont.svg
    • Arquivo | Importar
    • Role para baixo, clique com o botão direito no ícone | Glyph Info
    • Atualizar nome de glifo para uniFXXX (XXX é algo como 501, um número maior que o mais alto Unicode usado na v4.5 de FontAwesome)
    • Unicode Vlaue U + fXXX
    • Clique OK
    • Arquivo | Salve 
    • Arquivo | Gere Fontes …
    • Fechar FontForge
    • Abra seu projeto da web
    • Copie seus arquivos de fonts para a pasta “\ Content \ fonts \” (no meu projeto).
    • Edite “\ Content \ styles \ fa \ path.less” para ser como:
     @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; } 

    Sugiro manter seus icons 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 icons. Você pode então ter FontAwesome carregado em seu site a partir de um CDN e nunca precisa se preocupar em mantê-lo atualizado.

    Ao criar seus próprios icons personalizados, crie cada ícone usando o Adobe Illustrator ou um software semelhante. Depois que seus icons forem criados, salve cada um individualmente no formato SVG no seu computador.

    Em seguida, vá até o IcoMoon : http://icomoon.io , que tem o melhor software gerador de fonts (na minha opinião), e é grátis. O IcoMoon permitirá que você importe suas fonts svg-saved individuais para uma biblioteca de fonts e, em seguida, gere sua biblioteca personalizada de glifos de icons em eot , ttf , woff e svg . Um formato que o IcoMoon não gera é woff2 .

    Depois de gerar seu pacote de icons no IcoMoon , vá até o FontSquirrel : http://fontsquirrel.com e use o gerador de fonts. Use seu arquivo ttf gerado no IcoMoon . No novo pacote de icons criado, você terá seu pacote de icons no formato woff2 .

    Certifique-se de que os arquivos para eot , ttf , svg , woff e woff2 sejam todos do mesmo nome. Você está gerando um pacote de icons de dois sites / softwares diferentes e nomeia sua saída gerada de maneira diferente.

    Você terá CSS gerado para o seu pacote de icons em ambos os locais. Mas o CSS gerado no IcoMoon não includeá o formato woff2 na sua declaração @font-face {} . Certifique-se de adicionar isso quando estiver adicionando 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; } 

    Tenha em mente que você pode obter os valores unicode de glifo de cada ícone no seu pacote de icons usando o software IcoMoon . Esses valores podem ser úteis para atribuir seus icons via CSS, como em (supondo que estamos usando a font-family declarada no exemplo @font-face {...} acima):

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

    Você também pode obter o valor unicode do glifo e953 se abrir o arquivo svg gerado pelo pacote de fonts em um editor de texto. Por exemplo:

      

    No Font Awesome 5, você pode criar icons personalizados com seus próprios dados SVG. Aqui está um repo de demonstração do GitHub com o qual você pode brincar. E aqui está uma CodePen que mostra como algo semelhante pode ser feito em blocos .

    Em ambos os casos, simplesmente envolve o uso de library.add() para adicionar um object 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 atributo d em um elemento que é filho do . Assim (deixando de fora alguns detalhes para maior clareza):

        

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

    Eu pesquisei um pouco em webfonts SVG e criação de fonts, em meus olhos, se você quiser “adicionar” fonts para fonte-fonte já existente impressionante você precisa fazer o seguinte:

    vá ao inkscape e crie um glifo, salve-o como SVG para poder ler o código, certifique-se de atribuir um caractere unicode que não seja usado no momento, para que ele não entre em conflito com nenhum dos glifos existentes na fonte. isso pode ser difícil, então acho que uma abordagem mais simples seria replace um glifo existente pelo seu (basta escolher um que você não usa, copiar a primeira parte:

    Salve o SVG e depois converta-o em fonte web usando qualquer conversor on-line para que sua webfont funcione em todos os navegadores.

    Uma vez feito isso, você deve ter um SVG com um dos glifos substituído, caso em que você está pronto. se não, você precisa criar o CSS para o seu novo glifo, neste caso, tente reutilizar o CSS existente no FA e adicionar somente

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

    Se você quiser alguns icons (ou todos) da fonte-awesome incluindo seus icons svg personalizados você pode:

    1- Vá para http://fontawesome.io/ Baixe o zip e extraia-o, por exemplo, no seu Desktop.

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

    3- Depois de ter feito o login, clique na opção de header: Adicionar mais icons.

    4- Selecione o SVG da fonte-awesome localizado no seu zip extraído dentro das fonts.

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

    6- Inside Home (no header da página) Selecione os icons que deseja baixar, personalize-os para fornecer seus nomes personalizados e selecione publish para ter um link ou baixar as fonts e css.

    Desculpe meu ingles ! : D