Início / coding / Perguntas / 76923588
Accepted
Ricardo Castañeda
Asked: 2023-08-18 00:49:52 +0800 CST

Usando o ponto de código para renderizar o ícone delineado em vez de preenchido no Material Design Google Fonts

  • 772

Eu tenho um ícone Place de Material Icons Google Fonts que é renderizado usando um beforepseudo-seletor e o ponto de código e55f.

O problema é que está sendo renderizada a versão preenchida:
Ícone de local preenchido do Material Design

Em vez da versão delineada, quero:
Ícone delineado do local do Material Design

Existe uma maneira de usar a versão descrita usando o ponto de código?

Demonstração do Codepen aqui

<link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" as="style" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<div class="place"></div>

<style>
  .place::before {
    content: "\e55f";
    font-family: 'Material Icons';
  }
</style>
html

1 respostas

  1. Best Answer

    Basta alterar o font-family: 'Material Symbols Outlined';:

    .place::before {
  content: "\e55f";
  font-family: 'Material Symbols Outlined';
}
    <link rel="preload" href="https://fonts.googleapis.com/icon?family=Material+Icons" as="style">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" as="style" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />

<div class="place"></div>

    • 1

relate perguntas