Cómo introducir la biblioteca de iconos en la interfaz
Icono de selección
1. Introduzca la dirección de la biblioteca de iconos de Ali vector icon library iconfont
2. Busque el icono que necesita y agréguelo al carrito de compras.
3. Ingrese al carrito de compras y descargue el código
Icono de referencia
Primero echemos un vistazo al código CSS descargado que debe agregarse
Aquí está el código CSS de los tres íconos que elegí
@ En el código font-face introduce varios src, usualmente usamos el primero, ¡porque IE9 puede hacer la marea! , Estos últimos no se utilizan, por lo que no es necesario introducir su formato correspondiente
Entonces, después de la descarga, ¡podemos agregar iconfont.css!
@font-face {
font-family: "iconfont";
src: url('iconfont.eot?t=1616639737360'); /* IE9 */
src: url('iconfont.eot?t=1616639737360#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARUAAsAAAAACIQAAAQGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDFAqETIQLATYCJAMQCwoABCAFhG0HQRtuB8gOJaHAwABgYMlmPHy/3//WPmdf+aZJkkl686t3USCRSGIpQCV0ptOIrxSmWwn3/383vcEOTeqSmvkkhYll9AU8nBAmSueqyET1qxeH06b4fMtymWN51AXUxQEFNPYCmUAFgl212008MOPXtJjApA1JsKuaJgqkEmkViLdqJQ3SlkLOpIdeaEcGJsQ3EOvLZME1AF/17+M/ZIQUFE0F0vHmTXU7lP3RvzMKLZ0WfSQCmOfpEAyj4hBI4vWo4RWhDRwSmsxqixwDrRTKWbbOAY1iGbmofSm/4J8XLRDBNGJHwcofPScT/GHJFP4YFSqis3mPDj8BIkG0ph8vVHUUIPYLIH2Hb10RI5MtmeJPUeuWxbdRiw7HyhcuXLLAm5q3wK+3bMFCP4V84VSfNnq+xZvqOX/+xoW+MrZUftLhsJfYKSs1b4qvXeZ3OGa12YoR5t0xFfqPbcRmtTa1D3uZG3a7Az+r2tbmYDeeDOq98kxOlSxoqQNbcwafcgysVgrvqZxKEDYb2WOZNct5ypbAXku3EoTDIe9w1J63tVlW+esExPz5lnk4PmUBJuxY6NeqXEgfjPl08UfOaPv/tP+Cai7ieBSz9qjPv41eRz4jU78Br8d8QhUeIj985+VMKMvCSa+jBN54OXFhGRa567I/Lr3isU3q+w9xAp/fXU3v49Q3rHt4ZXkP5waioYJyp4CK1Aa1ww0fkjr1ndrkaqAPQBRs2R05HdatSzTC2TxNWLDvUfKo4IZVVpyNRm40HSbv4txUSt8efifsOt87I1TzdtczOWwb59waJNGERMZlYPLR4/sJ/GHRoa9BgXgZ1D6szAidUpm3+6rnYAy+Y0rPgEaBSofVVOWXlbkXdcdq/WZqQ3rN97Mc9TzqFEt0EvuJL7tiW9vAR4BhXK8IEwGGoe4USgD1RzgdhuC32Tu3v1vR754QAVAwxu+/tg/jhH1JeoXVzH/OXJmTOZsoM1MOZxSmdP31GhRMmsS/zoRFT84QraxOJfRWaig661D1NpGJPYTGlBG0eqcw6UDt8ClLOEKRTsC+8QBh3k4oZv2Cat51ZGIfQ2PVZ2jNhxAmPYXXhFO2Q41XcojmUTs5cCipVrAGhql53KR3Q0qzjuaabI2TIc6kdpPpKWndcC0yIO6MLqZBygyeZ0iGY/VkDSyHdDqWNHKsBin4FBXPGwtSU5mxO6UoWD3gLnEQGg9pRxpoKJKaAsuAkcV5eO/73SBKZjo0biZrRimDcEzU5ZPSpUhbgawVGFZlfcsxJoMoZeDxGCQGh6VHqgEdoqMBFsk4Xk8DUeClUO3wGRVIdfIxawUp94v0X7gEJpGNMgSYEBNhYui/qFizgjYoJUPUKjNtEA7jcgAAAA==') format('woff2'),
url('iconfont.woff?t=1616639737360') format('woff'),
url('iconfont.ttf?t=1616639737360') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1616639737360#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-shoucang:before {
content: "\e86d";
}
.icon-xihuan:before {
content: "\e86f";
}
.icon-zan:before {
content: "\e870";
}
El siguiente .icon-shoucang: antes de dividir los íconos, simplemente lo llamamos directamente,
no necesitamos obtener el código Unicode correspondiente al ícono de llamada. Si desea usar este código, debe verificarlo demo_index.html.
No seas tan problemático, usamos .icon-shoucang directamente.
Llame directamente al empaquetado
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="iconfont.css">
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
<ul>
<li><span class="iconfont icon-shoucang"></span></li>
<li><span class="iconfont icon-xihuan"></span></li>
<li><span class="iconfont icon-zan"></span></li>
</ul>
</body>
</html>
Pantalla de efecto de llamada
El icono se llamó con éxito, ¡todavía hay un pequeño aplauso aquí! ! !