إطلاق Font Awesome 5 وأيقونات SVG

الأخبار والأحداث إعلانات
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)
106

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

6 إعجابات
107

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

8 إعجابات
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)
109

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

5 إعجابات
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)
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)
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)
113

يجب عليك إعادة تحميل ملف SVG sprite الخاص بك، واستخدام icons-sprite كاسم للمتغير:

fontawesome
fontawesome890×642 43.4 KB

هل noom-info هو المعرف (ID) للرمز الخاص بك في SVG sprite؟

إعجابَين (2)
114

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

إعجاب واحد (1)
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 إعجابات
116

That looks like an awesome resource, thank you!

إعجابَين (2)
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 إعجابات
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 إعجابات
120

لقد اكتشفت أن الأيقونات المخصصة تعمل بشكل أفضل (أو حتى بشكل كامل) إذا كانت مسارًا واحدًا، دون مجموعات وبدون أي تحويلات.

لتحويل ملف SVG عشوائي إلى ملف SVG بهذه المواصفات باستخدام إنكسبيسك، يمكنك اتباع الخطوات التالية:

  1. فك تجميع كل العناصر، تحديد الكل، ثم اختيار [Path/Object to path].
  2. قم بتحميل وتثبيت إضافة Apply transform واستخدمها على المسار المتبقي: [Extension/Modify path/Apply transforms].
  3. احفظ الملف بصيغة SVG محسّنة، وحدد معظم الخيارات بحيث يتم حذف كل شيء باستثناء المسار.

بعد ذلك، كل ما عليك فعله هو نسخ المسار، وخصائص viewbox، واختيار اسم المعرف (id).

7 إعجابات
121

مرحباً، أواجه بعض المشاكل عند التعامل مع الأيقونات في سُماتي:

  1. لتفعيل المزيد من أيقونات FontAwesome، أضفت إلى ملف settings.yml الخاص بي:
svg_icons:
  default: "youtube|linkedin"
  type: "list"
  list_type: "compact"

لكن هذا لم ينجح.

  1. حاولت أيضاً إضافة أيقونات مخصصة

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

ولكن هذا أيضاً لم ينجح.

الكود الذي يحاول عرض أيقونة FontAwesome هو:

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

والأيقونة المخصصة:

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

أنا أستخدم theme-creator.discourse.org وعند البحث عن السبرايت (sprite)، وجدت هذا:

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

هذا هو محتوى السبرايت: https://gist.github.com/derevandal/93a28cff06b4c6ae67d46381aec2bca7

ومع ذلك، لا توجد أي من أنواع الأيقونات داخله.

ماذا يجب أن أفعل لعرض الأيقونة بشكل صحيح؟

هل يمكن لأي شخص مساعدتي في هذا؟

شكراً <3

إعجابَين (2)
122

أعتقد أن اسم المتغير يجب أن يكون icons-sprite، انظر المنشور الأول :up_arrow:
نجح رفع sprite إلى مكون سمة باستخدام الواجهة الرسومية بشكل ممتاز بالنسبة لي.

4 إعجابات
123

كنت أبحث عن أيقونة محددة من Font Awesome 5، لكن يبدو أنها غير متوفرة في تثبيت Discourse الخاص بي (تم تحديثه خلال الأسبوع الماضي). كم مرة يتم تحديث أيقونات Font Awesome المدمجة؟

إعجابَين (2)
124

هذا أيقونة Pro من FontAwesome، ويمكنك استخدامها في Discourse فقط عبر إضافة (النواة الأساسية لا تدعم أيقونات FontAwesome غير المجانية). يمكنك تجربة هذه الإضافة: أيقونات FontAwesome Pro.

7 إعجابات
125

شكرًا لك @pmusaraj! سألقِي نظرة على تلك الإضافة! :folded_hands:

إعجابَين (2)