إطلاق 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 on a self-hosted site for full details.

8 إعجابات
108

مرحبًا! كنت أتساءل عما إذا كان من الممكن إضافة أيقونة مخصصة إلى مكون في السمة.

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

نود استخدام المكون المذكور أعلاه لجعل categories%20icon أيقونة قابلة للنقر في رأس مثيلنا.

حتى بعد الاطلاع على التعليمات هنا وفي الموضوع ذي الصلة، لا يزال الأمر محيرًا قليلاً بالنسبة لي بشأن كيفية القيام بذلك.

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

لقد قمت بتحديث قسم “إضافة أيقونات مخصصة” في المنشور الأصلي @justin.noom، وقد أصبح من الأسهل الآن اتباع الخطوات.

5 إعجابات
110

شكرًا لك @pmusaraj! :smiley:

إذًا، إذا قمت برفع ملف .svg باسم test.svg إلى المكون ثم أضفت test إلى svg_icons، هل ستظهر الأيقونة بشكل صحيح؟

إعجاب واحد (1)
111

ليس تمامًا. يجب أن يكون الملف المرفوع عبارة عن رسم SVG Sprite. لا يهم اسم الملف، لكن من المهم أن تحتوي الرموز الموجودة بداخله على معرفات (IDs)، يمكنك استخدامها بعد ذلك في المكونات التي تقبل الأيقونات (مثل روابط الرؤوس المأيقونة، وأيقونات الوسوم، وأيقونات التصنيفات، وما إلى ذلك). تأكد من مراجعة مثال رسم SVG Sprite في المنشور الأصلي (OP).

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

هل الإعدادات الموضحة أدناه تمثل ذلك بشكل صحيح؟

إعدادات المكون الحالية:

svg
svg759×434 10.4 KB

الرمز المستخدم:

noom-info

النتيجة:

results

إعجاب واحد (1)
113

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

fontawesome
fontawesome890×642 43.4 KB

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

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

للأسف، لم أقوم بتجميعه في البداية. هل هناك أي برنامج يمكنك التوصية به للتحقق من هذه المعلومات أو تحريرها؟

إعجاب واحد (1)
115

يمكنك القيام بذلك يدويًا، فملفات SVG هي ملفات XML. أظهر بحث سريع على Google رابطًا مفيدًا: SVG symbol a Good Choice for Icons | CSS-Tricks (ملف العينة في المنشور الأصلي سهل القراءة أيضًا، فهو يحتوي على رمزين فقط).

5 إعجابات
116

يبدو هذا موردًا رائعًا، شكرًا لك!

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

هل من الممكن استخدام أيقونات Font Awesome ثنائية النغمة؟

يختلف كود SVG قليلاً في هذه الأيقونات، ولا يحتوي على عنصر symbol الذي يبدو ضروريًا في ملف الـ sprite.

فيما يلي مثال مع إزالة بعض المعلومات لتجنب انتهاك حقوق النشر، حيث إنها جزء من حزمة Font Awesome المدفوعة:

<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

لا أستطيع اختبار هذا الآن، لكن يبدو أنه ممكن. يمكنك محاولة تحويل عنصر SVG إلى رمز (symbol) مع تحديد معرف (id)، وإذا نجح الأمر، يمكنك إضافة أنماط fa-primary و fa-secondary إلى ملف التنسيق الخاص بك.

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)