He descargado algunos archivos .svg de ionicon pero no puedo usarlos usando el nombre de la clase.
<my-icon>heart</my-icon> <my-icon class="heart"></my-icon>Hay dos formas de implementar iconos.
Importe el css primero y use los nombres de clase correctos para los íconos, puede configurar los colores más tarde como lo desee.
Importe el css y escriba css personalizado para su nombre de clase personalizado
.heart::before { content: "\f388"; display: inline-block; font-family: "Ionicons"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; text-rendering: auto; line-height: 1; -webkit-font-smoothing: antialiased; color: green; } .heart-icon { color: red; } <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"> <span class="heart-icon ion-android-favorite"></span> <br><br> <span class="heart"></span>PD. El fragmento de desbordamiento de pila no funcionará, haga clic en el enlace codepen a continuación para ver los cambios
Codifique aquí
Referencia de Ionicons para nombres de clases: https://ionic.io/ionicons/v2
O si aún desea usar íconos descargados personalizados, puede intentar configurarlo en un elemento psuedo y puede cambiar su color usando la propiedad de filtro.
.custom_icon::before { content: url('https://svgsilh.com/svg/614515.svg'); max-height: 17px; max-width: 13px; transform: scale(0.009); filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%); position: absolute; transform-origin: left top; } <span class="custom_icon"></span>Primero, desea colocar etiquetas no regulares en html, como: < my-tag > Esto se puede ejecutar, pero en algunas computadoras no funcionará. Mostraré:
my-icon::before { content: "\f004"; } my-icon { font-family: 'Font Awesome 5 Free'; font-weight: 900; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet"/> <my-icon></my-icon>Pero debido a eso, puedes usar clases para detectar los íconos.
Entonces puedes usar algunas opciones, como:
.framework-icon { font-family: 'Font Awesome 5 Free'; font-weight: 900; } .framework-icon::before { content: "\f004"; } <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.css" rel="stylesheet"/> <div> svg tag: <br><svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="4" fill="black" /> </svg> </div> <div> frameworks like font-awesome: <div class="framework-icon"></div> </div>1. Es posible que deba convertir el formato .svg a .ttf o .woff para usarlo como un nombre de clase. Encontré que este sitio web puede aceptar archivos svg y proporciona archivos .ttf o .woff como salida.
nota: Puede ajustar los estilos de svg de esta manera fácilmente.
Example: ```<div class='fa fa-icon'></div>``` 2. puedes crear una clase que tendrá ese svg como fondo para html <tag>
<style> .svg{ background:url("image/path" ) } </style> <body> <div class="svg"></div> </body>Puede escribir sus propias propiedades para la clase de fondo