Динамически разрешать код шрифта значка в правиле S CSS - PullRequest
Новая
       39

Динамически разрешать код шрифта значка в правиле S CSS

0 голосов
/ 21 марта 2020

Я использую Nuxt.js (https://nuxtjs.org/), Vuetify.js (https://vuetifyjs.com/) и @mdi/font (https://materialdesignicons.com/) шрифт значка.

У меня есть случай, когда я хочу использовать значок, но не так, как обычно в HTML, например, 

<v-icon>
  mdi-check
</v-icon>

, но я хочу использовать mdi-check в правиле S CSS (без кода html, связанного со значками), поэтому я предполагаю, что мне нужно динамическое разрешение его кода content, например, 

&:before {
  font-family: Material Design Icons;
  content: 'here I need to dynamically access the code of the "mdi-check" icon, which is "\F012C"';
}

, это важно мне не нужно ставить код stati c (\F012C), потому что он может измениться в будущем, но я бы хотел найти способ его динамического разрешения.

Есть идеи?

Спасибо

1 Ответ

0 голосов
/ 21 марта 2020

делай так. 

<v-icon data-icon="\F012C">
  mdi-check
</v-icon>

затем в css

&:before {
  font-family: Material Design Icons;
  content: attr(data-icon);
}

Дай мне знать, если это не сработает.

Спасибо

...