Добавить свои иконки в каталог

ЕСТЬ РЕШЕНИЕ InstantCMS 2.X
#1 24 апреля 2022 в 18:09

Очень хочется при создании меню добавить свои иконки, но не через class, а через каталог, где вкладки regular, solid. Создаю в папке icon свой файл, но в меню не появляется новая вкладка. в solid добавляю новую иконку, не определяет . 

Думаю этот вопрос актуален будет для всех, напишите подробно где какой путь добавить что бы могли определятся любые иконки и цветные и чб. 

#2 24 апреля 2022 в 18:23

solid добавляю новую иконку, не определяет

Happy

Значит не правильно добавляете.

#3 24 апреля 2022 в 18:23

Итак.

Открываем папку templates/дочерний_или_modern/images/icons/ В нем уже лежат другие файлы иконок. Копируем файл, например, в my.svg и очищаем, оставив только

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <svg xmlns="http://www.w3.org/2000/svg">
  3.  
  4. </svg>

Файл иконок готов. Теперь в него надо добавить символы, чтобы их можно было выводить на сайте.

Добавьте в пустое место следующий код

  1. <symbol id="top-phone" viewBox="0 0 13 14">
  2. <path d="M0 4.63884V1.02773C0 0.628886 0.323353 0.305511 0.722222 0.305511H4.33333C4.7322 0.305511 5.05556 0.628886 5.05556 1.02773V3.91662C5.05556 4.31547 4.7322 4.63884 4.33333 4.63884H2.88889C2.88889 7.82977 5.47569 10.4166 8.66667 10.4166V8.97218C8.66667 8.57337 8.99001 8.24996 9.38889 8.24996H12.2778C12.6767 8.24996 13 8.57337 13 8.97218V12.5833C13 12.9821 12.6767 13.3055 12.2778 13.3055H8.66667C3.8802 13.3055 0 9.4253 0 4.63884Z" fill="#495057"/>
  3. </symbol>

Сохраните файл. Все. Теперь этот файл появится в выборе с одной иконкой {my%top-phone}

Изображение

По похожему принципу вы можете добавить другие символы, меняя в них id, viewBox и содержимое символа на свои.

Чтобы иконки не была черной, в коде символа удалите атрибут заливки fill. Есть еще нюансы, но это другая история developer.mozilla.org/ru/docs/Web/SVG

#4 24 апреля 2022 в 18:25

Итак.

Открываем папку templates/дочерний_или_modern/images/icons/ В нем уже лежат другие файлы иконок. Копируем файл, например, в my.svg и очищаем, оставив только

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <svg xmlns="http://www.w3.org/2000/svg">
  3.  
  4. </svg>

Файл иконок готов. Теперь в него надо добавить символы, чтобы их можно было выводить на сайте.

Добавьте в пустое место следующий код

  1. <symbol id="top-phone" viewBox="0 0 13 14">
  2. <path d="M0 4.63884V1.02773C0 0.628886 0.323353 0.305511 0.722222 0.305511H4.33333C4.7322 0.305511 5.05556 0.628886 5.05556 1.02773V3.91662C5.05556 4.31547 4.7322 4.63884 4.33333 4.63884H2.88889C2.88889 7.82977 5.47569 10.4166 8.66667 10.4166V8.97218C8.66667 8.57337 8.99001 8.24996 9.38889 8.24996H12.2778C12.6767 8.24996 13 8.57337 13 8.97218V12.5833C13 12.9821 12.6767 13.3055 12.2778 13.3055H8.66667C3.8802 13.3055 0 9.4253 0 4.63884Z" fill="#495057"/>
  3. </symbol>

Сохраните файл. Все. Теперь этот файл появится в выборе с одной иконкой {my%top-phone}

Изображение

По похожему принципу вы можете добавить другие символы, меняя в них id, viewBox и содержимое символа на свои.

Чтобы иконки не была черной, в коде символа удалите атрибут заливки fill. Есть еще нюансы, но это другая история developer.mozilla.org/ru/docs/Web/SVG

Zau4man

Огромная благодарность! 🤝

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.