Замените значки материалов Google собственными значками, оставьте тот же код содержания или создайте новый.

Значки Google Material у разных вариантов шрифтов значков семейства: округлые, острые, двухцветные и т.д.

Команда UX берет некоторые значки и настраивает их немного, немного толще или немного подправляя.

  1. Можно ли заменить/отредактировать значки и сохранить тот же код содержимого без каких-либо проблем? Пример: Мы используем приложение Visual Studio.Net Core и разместили значки материалов в нашей библиотеке.

  2. Кроме того, возможно ли создать новый код контента? Скажем, я создаю логотип компании. Могу ли я назначить ему код контента?

Обращение к значкам материалов с кодом содержимого и названием класса

.carouselrightarrow {
    font-family: Material Icons;
    font-size: 36px;
    position: absolute;
    top: 16px;
    content: "\e409";
}

<button id="add-to-favorites"
        class="mdc-icon-button">
    <i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">favorite</i>
    <i class="material-icons mdc-icon-button__icon">favorite_border</i>
</button>

Прямо сейчас в настоящее время заменяется закругленная иконка базы. Еще одна причина для этого помимо экономии времени кодирования/существующей кодовой базы; если клиент когда-нибудь захочет перейти на Google Материал: заполненный, резкий, двухцветный, выделенный, это можно сделать простым способом.

Ссылки:

Ссылки на возможные решения

Ответы

Ответ 1

Лучше всего переопределить CSS.

(Это не сложно. C в CSS - это "каскад", что означает, что то, что приходит потом, используется вместо того, что было раньше. Это переопределение.)

Создайте файл CSS:

.material-icons.mdc-icon-button__icon--companylogo {
  font-family: "Font From UX Team";
  /* whatever other styling you need, like sizes */
  content: \0000;
}
.material-icons.mdc-icon-button__icon--on {
  font-family: "Font From UX Team";
  /* whatever other styling you need, like sizes */
  content: \0000;
}

Убедитесь, что файл шрифта от вашей команды UX включен где-то до этого. Также убедитесь, что этот файл загружен после другого CSS, который используется иконками материалов прямо сейчас. Замените директивы content на код символа (спросите команду UX), который соответствует значку, который вы хотите.

Это должно заменить весь контент значков материалов, который вы выбрали, тем, который вы хотите вместо этого.

Если вы обнаружите, что то, что они заменяют, оказывается слишком сложным для управления собственным CSS, создайте его автоматически или используйте препроцессор CSS, такой как SASS.

Обновлено

Кажется, что вы смешиваете SVG и элементы шрифта, используя шрифт от Google и SVG от вашей команды. Это усложняет вещи. SVG - это, по сути, HTML, а определения сущностей (иконок), которые вы используете, - чисто CSS. Проблема возникает потому, что CSS ожидает, что HTML уже будет там.

Вы можете сделать несколько вещей:

  1. Используйте все SVG. Это означает, что вы не используете файл шрифта из Material Icons и вместо этого включаете их SVG. Учитывая, что вы, вероятно, работаете в рамках, которые изначально приняли за вас решение, это может быть очень сложно. В любом случае, это будет дорогостоящим с точки зрения размера листинга HTML, поэтому время загрузки страницы.
  2. Соберите SVG из вашей команды в файл шрифтов. Это требует большей работы на стороне сервера, но дает наиболее элегантное решение. Ваша команда UX может знать, как это сделать, или может захотеть учиться, что избавит вас от хлопот. Также может быть полностью автоматизированный способ сделать это в процессе сборки (VS, верно?), Который может избавить вас от проблем.
  3. Включите SVG только для элементов, которые вы заменяете и добавляете. У вас есть возможность либо включить их на каждой странице (в HTML или CSS), либо как-то выяснить, где они нужны, и включить их выборочно (сложность кода).

Я очень рекомендую средний вариант (# 2). Возможно, начните с того, чтобы хорошо спросить свою команду UX, могут ли они использовать программное обеспечение для редактирования, которое им уже нужно, для вывода файла шрифтов (ODT, TTF и т.д.) Вместо списков SVG, которые могут уже быть доступной функцией. Нажатие в другом месте может дать вам нужный результат, затем вы просто добавляете немного CSS.