Adicione ícones personalizados à fonte impressionante

138

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?

Christian Schlensker
fonte
2
você encontrou uma solução? ou você acabou de escolher outra conexão?
Michel Ayres
1
link para '.svg versão do Font Awesome' não encontrado. Por favor atualize.
Yannis Dran
2
Aqui está a documentação pertinente: github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome
Rimian

Respostas:

125

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.

davidtheclark
fonte
Obrigado :) Isso ajuda muito!
21813 Johnny Zhao
Ótimo serviço. Obrigado por isso. Gerou um conjunto de ícones personalizados a partir de svgs em pouco tempo.
Nodeze 17/04
Boa ferramenta Perfeito. :)
Christian Mark
2
Olá, eu criei ícones de fontes com uma pasta que contém ícones svg. Mas mais tarde eu quero adicionar um único ícone a isso, é possível adicionar? ou novamente eu tenho que gerar com a pasta ?.
precisa saber é o seguinte
34

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

Glen
fonte
8
O nome de domínio expirou em 2 de outubro de 15
Aerious
6
Aqui está o projeto do github até que eles resolvam o problema do domínio .
Glen
21

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 )

mwilkerson
fonte
E se quisermos usar os prefixos padrão, para que o novo svg possa se encaixar no site?
Norbert Kardos
1
Você pode usar o prefixo que desejar. Mas se você usar um prefixo padrão ( fab, fas, far, fal), você vai estar em maior risco de uma nomenclatura de conflito se não for agora, então possivelmente no futuro à medida que continuamos a adição de ícones com esses prefixos padrão. Usar um prefixo personalizado não tornará menos provável que um svg "se encaixe no site" - mas não sei o que você quer dizer com essa frase, então talvez você possa esclarecer?
Mwilkerson
Precisamos de um ícone específico de marca social (com mais de 200 milhões de usuários), que já foi solicitado. Gostaríamos de adicionar este ícone svg à versão pro para usá-lo em um site, sem criar exceções html / css / outros casos. Todas as outras marcas têm ícones já, portanto, a classe fab está presente nos elementos (e a marca realmente selecionada é adicionada dinamycally ao css)
Norbert Kardos
1
Sim, isso funcionará bem para usar o prefixo padrão para adicionar seu ícone personalizado. Lembre-se de que, se o nome do ícone acabar sendo o mesmo que adicionamos posteriormente a esse prefixo, haverá um conflito. Então, talvez escolha um nome de ícone com pouca probabilidade de entrar em conflito? CodePen bifurcado para demonstrar: codepen.io/fontawesome/pen/pZWXYX
mwilkerson:
Meu SVG veio de um arquivo Adobe AI e tinha vários caminhos. Isso me impediu de definir corretamente o parâmetro "d" especificado acima. Eu tive que primeiro converter o arquivo AI em um caminho composto antes de exportá-lo como um SVG. Eu aprendi como fazer isso aqui: graphicdesign.stackexchange.com/questions/35054/...
Alex Standiford
18

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.).

Erik Dahlström
fonte
18

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" ... />
Pegues
fonte
não está funcionando ,.,. completar todo o processo apenas ícone não aparecer em vez números aparecem
Inzmam ul Hassan
1
Você pode elaborar um pouco mais? Fico feliz em ajudá-lo com seu problema. Você especificou font-family: customiconpack;com o seu selector:after? Deixe-me atualizar minha solução agora para o selector:afterexemplo de código.
Pegues 5/01/19
Carreguei o arquivo svg my icon,. eu coloquei o arquivo,., coloquei no projeto adicione um novo arquivo css no projeto copiei seu código no arquivo alterei o código com o código do meu ícone,. não funcionou.
Inzmam ul Hassan
1
Entre na sala de bate-papo que criei para que possamos discutir o problema com mais facilidade: chat.stackoverflow.com/rooms/132402/…
Pegues
2
Estou comentando aqui apenas para informar aos outros que o problema foi que você criou seu SVG no Illustrator a partir de um PNG importado. Você deve recriar seu ícone como um vetor. PNG é um formato raster e não possui curvas de vetor.
Pegues 5/01/17
13

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"; }

OzBob
fonte
3

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)
>}
Samuel Bergström
fonte
2

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

CarLoOSX
fonte
Isso funcionará, mas acho que é melhor criar sua própria biblioteca de ícones personalizada e usar o lado mais interessante. Isso permitirá que você seja atualizado de forma impressionante (com novos ícones).
Guillaume Harari