Introduzione a Font Awesome 5 e icone SVG

Notizie ed Eventi Annunci
105

Wondering “how do you load a plugin from a private repository?” after reading this thread? My bad, here’s how you do that:

  1. cd /var/discourse
  2. vim containers/app.yml
  3. Add plugin repo to app.yml similar to public gits, but make these changes to the https link.

- git clone https://username:password@github.com/user-name/plugin-name.git

Instead of grabbing the https from github as per usual, the git URL is comprised of:

  1. Your github username followed by the colon character :
  2. Your github password followed by the ampersand at character @
  3. Github’s URL followed by the forward-slash character /
  4. Your github username followed by the forward-slash character /
  5. Your plugin repository-name followed by .git

Hope this helps. :raised_hands:

2 Mi Piace
106

You can also use a token, which avoids having to use username and password. Github provides a means to generate the token.

6 Mi Piace
107

Hey @jameshahnii, @merefield’s reply is the current recommended method. See Install Plugins in Discourse for full details.

8 Mi Piace
108

Hi there! I was wondering if it would be possible to add a custom icon into a theme component.

https://meta.discourse.org/t/iconified-header-links/86307/54

We are looking to use the above component to have categories%20icon be a linked icon in our instance’s header.

Even after examining the instructions both here and in the related topic, I’m still a tad confused as to how I might go about doing this.

2 Mi Piace
109

I have updated the “Adding custom icons” section in the OP @justin.noom, it might be easier to follow the steps now.

5 Mi Piace
110

Thank you @pmusaraj! :smiley:

So, if I were to upload a .svg entitled test.svg to the component and then add test to svg_icons - it would then show up properly?

1 Mi Piace
111

Not quite. The uploaded file should be an SVG sprite. Its name doesn’t matter, but it’s important that the symbols it contains have IDs, which you can then use in the components that accept icons (iconified header links, tag icons, category icons, etc.). Make sure you look at the example SVG sprite in the OP.

2 Mi Piace
112

Would the settings depicted below properly represent that?

Current component settings:

svg
svg759×434 10.4 KB

Sprite used:

noom-info

Result:

results

1 Mi Piace
113

Devi ricaricare il tuo sprite SVG e utilizzare icons-sprite come nome della variabile:

fontawesome
fontawesome890×642 43.4 KB

noom-info è l’ID del tuo simbolo nello sprite SVG?

2 Mi Piace
114

Unfortunately I didn’t initially compile it - is there any software you might recommend that could check/edit that information?

1 Mi Piace
115

You can do it by hand, SVGs are XML. A quick Google search gave this useful link: SVG `symbol` a Good Choice for Icons | CSS-Tricks (the sample file in the OP is also very easy to read, it only has two symbols).

5 Mi Piace
116

That looks like an awesome resource, thank you!

2 Mi Piace
117

Is it possible to use the fontawesome duotone icons? The svg code is a bit different in these and do not have the symbol element that seems to be necessary in the sprite file. Below is an example with some of the information stripped out to avoid in copyright infringement since it is part of the paid fontawesome package.

<svg aria-hidden="true" focusable="false" data-prefix="fad" data-icon="award" class="svg-inline--fa fa-award fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><g class="fa-group"><path class="fa-secondary" fill="currentColor" d="M382.78 448.69L324 304.23a40.63 40.63 0 0 1-22.23 15.62C280 325.78 278.26.25-38.28 52.69 2A16 16 0 0 0 384 455.33a16.23 16.23 0 0 0-1.22-6.64zM192 240a64 64 0 1 0-64-64 64 64 0 0 0 64 64z" opacity="0.4"></path><path class="fa-primary" fill="currentColor" d="M366.62 152.72a41.51 41.51 0 0 0-10.42-39.59c-20.41-20.77-18.47-17.35-25.95-45.74a40.66 40.66 0 0 0-28.47-29c-27.88-7.61-24.54-25 25.95-45.75a41.49 41.49 0 0 0 10.42-39.58c-7.48-28.36-7.49-24.4-.01-52.81zM192 272a96 96 0 1 1 96-96 96 96 0 0 1-96 96z"></path></g></svg>

8 Mi Piace
118

I’m not able to test this right now, but it looks possible. You can try to convert the svg element to a symbol with an id and if that works then you can add the fa-primary and fa-secondary styles to your stylesheet.

9 Mi Piace
120

Ho scoperto che le icone personalizzate funzionano meglio (se non addirittura solo) se sono composte da un singolo percorso, senza gruppi e senza alcuna trasformazione.

Per convertire un file SVG a caso in un file SVG del genere con Inkscape, è possibile:

  1. Annullare il raggruppamento di tutto, selezionare tutto e [Percorso/Oggetto in percorso]
  2. Scaricare e installare l’estensione Applica trasformi e utilizzarla sul percorso rimanente: [Estensione/Modifica percorso/Applica trasformi]
  3. Salvare tutto come SVG ottimizzato, selezionando quasi tutte le opzioni in modo che venga eliminato tutto tranne il percorso.

A questo punto, è sufficiente copiare il percorso, l’attributo viewBox e scegliere il nome dell’ID.

7 Mi Piace
121

Ciao, sto riscontrando alcuni problemi con le icone del mio tema:

  1. Per attivare più icone FA, ho aggiunto al mio settings.yml:
svg_icons:
  default: "youtube|linkedin"
  type: "list"
  list_type: "compact"

Ma non ha funzionato.

  1. Ho anche provato ad aggiungere icone personalizzate

assets/icons.svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="i-facebook" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M30.235 0H1.766C.791 0 .001.791.001 1.765v28.469c0 .976.791 1.765 1.765 1.765h15.325V19.607h-4.172v-4.828h4.172v-3.567c0-4.132 2.525-6.38 6.212-6.38 1.767 0 3.285.129 3.728.188v4.32H24.47c-2 0-2.389.961-2.389 2.361v3.081h4.779l-.62 4.84h-4.159v12.376h8.153c.977 0 1.767-.789 1.767-1.765V1.764c0-.975-.789-1.765-1.765-1.765z"/></symbol>
  <symbol id="i-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 11.04"><path d="M6 2a3.15 3.15 0 012.84-2A3.32 3.32 0 0112 3.25a3.12 3.12 0 01-.1 1.23 5.36 5.36 0 01-1.66 2.76L6 11 1.78 7.24A5.43 5.43 0 01.12 4.48 3.12 3.12 0 010 3.25 3.33 3.33 0 013.16 0 3 3 0 016 2z"/></symbol>
  <symbol id="i-instagram" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 46.1c68.4 0 76.5.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9C71.5 20 57.2 28.7 43 43 28.7 57.2 20 71.5 13.4 88.3c-6.3 16.3-10.7 34.9-11.9 62.1C.3 177.8 0 186.5 0 256s.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1C20 440.5 28.7 454.8 43 469c14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9C334.2.3 325.5 0 256 0z"/><path d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5S183.4 387.5 256 387.5 387.5 328.6 387.5 256 328.6 124.5 256 124.5zm0 216.8c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3zm167.4-222c0 16.955-13.745 30.7-30.7 30.7S362 136.255 362 119.3s13.745-30.7 30.7-30.7 30.7 13.745 30.7 30.7z"/></symbol>
  <symbol id="i-linkedin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.263 27.269h-4.739v-7.425c0-1.771-.036-4.049-2.469-4.049-2.471 0-2.848 1.927-2.848 3.919v7.556h-4.739V12.001h4.552v2.081h.061c.636-1.2 2.183-2.467 4.493-2.467 4.801 0 5.689 3.16 5.689 7.273v8.381zM7.116 9.911a2.75 2.75 0 01-2.751-2.753 2.752 2.752 0 112.751 2.753zm2.376 17.358H4.74V12h4.752v15.269zM29.633 0H2.361C1.056 0 0 1.032 0 2.305v27.389c0 1.275 1.056 2.305 2.361 2.305h27.268c1.304 0 2.371-1.031 2.371-2.305V2.305C32 1.032 30.933 0 29.629 0h.004z"/></symbol>
  <symbol id="i-mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 32"><path d="M39.269 32a4.372 4.372 0 004.363-4.363V4.364A4.372 4.372 0 0039.269.001H4.363A4.372 4.372 0 000 4.364v23.273A4.372 4.372 0 004.363 32h34.906zM4.363 1.457h34.906a2.91 2.91 0 012.906 2.906v23.273a2.91 2.91 0 01-2.906 2.906H4.363a2.91 2.91 0 01-2.906-2.906V4.363a2.91 2.91 0 012.906-2.906zm17.803 19.686c1.79 0 3.468-.75 4.721-2.113L38.153 6.707a.735.735 0 00-.043-1.031.727.727 0 00-1.031.043L25.813 18.05c-1.943 2.113-5.352 2.113-7.295 0L7.235 5.71a.73.73 0 10-1.074.988l11.283 12.34c1.253 1.355 2.932 2.105 4.721 2.105zM6.698 26.938c.17 0 .349-.06.494-.187l9.92-9.059c.298-.273.315-.733.043-1.023s-.733-.315-1.031-.043l-9.92 9.042a.72.72 0 00-.043 1.023.722.722 0 00.537.247zm30.944 0a.743.743 0 00.537-.239.725.725 0 00-.043-1.023l-9.937-9.067c-.298-.273-.75-.256-1.023.043s-.256.758.043 1.023l9.928 9.059a.698.698 0 00.494.205z"/></symbol>
  <symbol id="i-twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.939 6.092a13.31 13.31 0 01-3.767 1.033 6.613 6.613 0 002.884-3.631 13.55 13.55 0 01-4.169 1.579A6.56 6.56 0 0015.539 9.55c0 .52.06 1.02.169 1.499-5.453-.257-10.287-2.876-13.521-6.835a6.432 6.432 0 00-.888 3.3 6.56 6.56 0 002.917 5.461 6.554 6.554 0 01-2.971-.821v.081a6.564 6.564 0 005.261 6.436 6.663 6.663 0 01-2.949.113 6.582 6.582 0 006.139 4.556 13.156 13.156 0 01-8.136 2.807c-.52 0-1.039-.031-1.56-.089a18.657 18.657 0 0010.076 2.945c12.072 0 18.665-9.995 18.665-18.648 0-.279 0-.56-.02-.84 1.281-.919 2.4-2.08 3.28-3.397l-.063-.027z"/></symbol>
  <symbol id="i-youtube" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.327 8.273a4.026 4.026 0 00-2.756-2.777l-.028-.007c-2.493-.668-12.528-.668-12.528-.668s-10.009-.013-12.528.668A4.026 4.026 0 00.71 8.245l-.007.028C.26 10.554.007 13.176.007 15.858v.163-.008.126c0 2.682.253 5.304.737 7.845l-.041-.26a4.026 4.026 0 002.756 2.777l.028.007c2.491.669 12.528.669 12.528.669s10.008 0 12.528-.669a4.026 4.026 0 002.777-2.756l.007-.028c.425-2.233.668-4.803.668-7.429l-.001-.297v.015l.001-.31c0-2.626-.243-5.196-.708-7.687l.04.258zM12.812 20.801V11.21l8.352 4.803z"/></symbol>
  <symbol id="i-blog" xmlns="http://www.w3.org/2000/svg" viewBox="0 -20 512 511"><path d="M67.18 48.395h-.102c-5.523 0-10 4.476-10 10 0 5.523 4.477 10 10 10h.102c5.523 0 10-4.477 10-10 0-5.524-4.477-10-10-10zm0 0M116.71 48.395h-.1c-5.524 0-10 4.476-10 10 0 5.523 4.476 10 10 10h.1c5.524 0 10-4.477 10-10 0-5.524-4.476-10-10-10zm0 0M166.242 48.395h-.101c-5.524 0-10 4.476-10 10 0 5.523 4.476 10 10 10h.101c5.524 0 10-4.477 10-10 0-5.524-4.476-10-10-10zm0 0M444.309 48.395h-192.93c-5.524 0-10 4.476-10 10 0 5.52 4.476 10 10 10h192.93c5.523 0 10-4.48 10-10 0-5.524-4.477-10-10-10zm0 0M262.89 452.438a10.1 10.1 0 00-7.07 2.93c-1.86 1.859-2.93 4.44-2.93 7.07s1.07 5.21 2.93 7.07c1.871 1.86 4.442 2.93 7.07 2.93s5.212-1.07 7.07-2.93c1.868-1.86 2.93-4.442 2.93-7.07s-1.062-5.211-2.93-7.07a10.08 10.08 0 00-7.07-2.93zm0 0"/><path d="M480.23.5H31.77C14.254.5 0 14.754 0 32.27v408.398c0 17.52 14.254 31.77 31.77 31.77H221c5.523 0 10-4.477 10-10s-4.477-10-10-10H31.77c-6.489 0-11.77-5.278-11.77-11.77V116.289h472v324.379c0 6.488-5.281 11.77-11.77 11.77H303.668c-5.523 0-10 4.476-10 10s4.477 10 10 10H480.23c17.516 0 31.77-14.25 31.77-31.77V32.27C512 14.754 497.746.5 480.23.5zM20 96.285V32.27c0-6.489 5.281-11.77 11.77-11.77h448.46c6.489 0 11.77 5.281 11.77 11.77v64.02H20zm0 0"/><path d="M178.04 230.5c0-19.852-16.15-36-36-36H108.37c-5.523 0-10 4.477-10 10v104c0 5.523 4.477 10 10 10h33.668c19.852 0 36-16.148 36-36 0-10.215-4.281-19.441-11.14-26 6.859-6.559 11.14-15.785 11.14-26zm-20 52c0 8.82-7.18 16-16 16H118.37v-32h23.668c8.82 0 16 7.176 16 16zm-39.669-36v-32h23.668c8.824 0 16 7.18 16 16s-7.176 16-16 16zm0 0M206.648 194.5c-5.523 0-10 4.477-10 10v80.871c0 18.27 14.864 33.129 33.13 33.129 5.523 0 10-4.477 10-10s-4.477-10-10-10c-7.239 0-13.13-5.89-13.13-13.129V204.5c0-5.523-4.476-10-10-10zm0 0M324.867 282.29c0-19.97-16.242-36.216-36.21-36.216s-36.212 16.246-36.212 36.215 16.246 36.211 36.211 36.211c19.969 0 36.211-16.242 36.211-36.21zm-52.422 0c0-8.942 7.274-16.216 16.211-16.216s16.211 7.274 16.211 16.215c0 8.938-7.27 16.211-16.21 16.211s-16.212-7.273-16.212-16.21zm0 0M377.414 346.5c-8.937 0-16.21-7.273-16.21-16.21 0-5.524-4.477-10-10-10s-10 4.476-10 10c0 19.968 16.245 36.21 36.21 36.21 19.969 0 36.215-16.242 36.215-36.21v-48c0-19.97-16.246-36.216-36.215-36.216-19.965 0-36.21 16.246-36.21 36.215s16.245 36.211 36.21 36.211c5.828 0 11.332-1.39 16.215-3.848v15.637c0 8.938-7.274 16.211-16.215 16.211zm0-48c-8.937 0-16.21-7.273-16.21-16.21 0-8.942 7.273-16.216 16.21-16.216 8.941 0 16.215 7.274 16.215 16.215 0 8.938-7.274 16.211-16.215 16.211zm0 0M108.371 416.5H403.63c5.523 0 10-4.477 10-10s-4.477-10-10-10H108.37c-5.52 0-10 4.477-10 10s4.48 10 10 10zm0 0"/></symbol>
  <symbol id="i-github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#212121" d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"/></symbol>
</svg>

about.json

"assets": {
  "icons": "assets/icons.svg"
},

E anche in questo caso non ha funzionato.

Il codice che tenta di mostrare l’icona FontAwesome è:

<svg class="fa d-icon d-icon-linkedin svg-icon svg-node" aria-hidden="true">
  <use xlink:href="#fab-linkedin"></use>
</svg>

E quello personalizzato:

<svg class="fa d-icon d-icon-facebook svg-icon svg-node" aria-hidden="true">
  <use xlink:href="#i-facebook"></use>
</svg>

Sto utilizzando theme-creator.discourse.org e, cercando lo sprite, ho trovato questo:

data-svg-sprite-path="/svg-sprite/theme-creator.discourse.org/svg-3672-f683dca15466be00000f7a819b09dd65f3e78e11.js

Questo è il contenuto dello sprite: https://gist.github.com/derevandal/93a28cff06b4c6ae67d46381aec2bca7

Eppure, al suo interno, non ci sono né un tipo né l’altro di icone.

Cosa devo fare per posizionare correttamente l’icona?

Qualcuno può aiutarmi?

Grazie <3

2 Mi Piace
122

Credo che il nome della variabile debba essere icons-sprite, vedi il primo messaggio :up_arrow:
L’upload di uno sprite a un componente del tema tramite l’interfaccia grafica ha funzionato perfettamente per me.

4 Mi Piace
123

Stavo cercando una icona specifica di Font Awesome 5, ma sembra che non sia disponibile nella mia installazione di Discourse (aggiornata nell’ultima settimana). Con quale frequenza vengono aggiornate le icone di Font Awesome incluse?

2 Mi Piace
124

Quello è un’icona FA Pro; puoi utilizzarla in Discourse solo tramite un plugin (il core non supporta icone FontAwesome non gratuite). Puoi provare con questo plugin: FontAwesome Pro icons.

7 Mi Piace
125

Grazie @pmusaraj! Darò un’occhiata a quel plugin! :folded_hands:

2 Mi Piace