自定义字体图标：使用 @font-face 和 Unicode 编码

@font-face {font-family: 'iconfont'; src: url('iconfont.eot?t=1591106386397'); /* IE9 / src: url('iconfont.eot?t=1591106386397#iefix') format('embedded-opentype'), / IE6-IE8 / url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPkAAsAAAAACCgAAAOVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEDIM4ATYCJAMMCwgABCAFhG0HPBsEB1GUDUqS7IckiWBsgSKJ5iIQA3MI4geKAwAAlgIQD19j7f3dvUMtQRJNHn26aJJEYoiEToIQxUIheSdEpnsms/x+7VRC3R1ElWSaNOmT7YvvDbzSSY3SaIQIoTG0rs5YPKzkCKMdmFhnZl8Ihekb28ETv33fz7o4nDbF5zc4pzmmRl2AcUABjb0swQJKkHuIV7u0w15PoF6fKeXl/dOLUktBuwXiMPBUqZVSKTXZoVaolowt4kxdbTpJfpz6349fEyEhqWS078rBni1tfpx/3fAd/w7XLgJ7PAP4SWSMKynEbqlpRzUMjauqV0W1+uSqIqSxvP//+CxNUDX/8EiCqKKZjWCYCNNJsW1WLL5Bzlmzb65zFXW4U/ImqTtRmqq8rTVL84YCiXK964MkBwBChhC37GSmaAaSZCIxivE4l2FIEkKCE4+PJJNjXMSMJhepAICiEKKrGWaMhIBoAYhLZOh2Bu7SzZGtAqIe0SYcGUlQiUgCUTVo/TnJjVvc95HI5Yi3TFFIQg4HkA28Mz+KSzM0xiMcdSST3vj0UzjDecQXy46LKNurEblFc0L3gGbB7yd2/6rYfSSsEoO2lVGueUc76Qd5FBr4XjBRXGr52LLO3SgfmellnsiUfeLOjkZD4cMQHi4vxEFvmweWxo5OZvix0VJYMQTybB2X8TbsGqooxPqHm3j4sdDQ2N6Fh17hMYUVnLuDgqKukpbs4WGWHRlWt5QUdhL9OpNfZny4NlGbb7prFux5BkrDntnR4Yvm72lYnjz7vL23GnzeXB3LWuqPt09ct8c9GsyblVq+Zb7y8lN/4+H2amVv2PFX2y3g/ef9DBVFu3RqJVqzfyG7ZUnRuFSdi8KyWYY7O/KbDAlkCDr/xNbur7+lSyk2hFqBjZDU6IWsVj+yYMehosEUVNWag3pjDiY36MCqotRh1AdAaPUFSbNXyFr9IAv2Fyq6/UNVa/Ch3lbo52wwGJudLkYlaEG/QGCylCytdILsM/QeYsVJro+7QnaBF+Zn5rLRA0yRxxjgHr0FEQLiLIF92AzjOIOcsxCNzPgi+cbsLJW9aMZkSaljCUOKQBbQXoCAkUmRW1l0cp8/gzwPYgrXFFXpryDmBLWDeTPmWiAPRGmromu5xHnkWSAEAYRlEmAfDCg2QxmQl7cKIUPM8HsEchtmSTlqK5qZX5I83yqoR4/JkSJHUXMcuEDH2NoLTJSqBEslAAAA') format('woff2'), url('iconfont.woff?t=1591106386397') format('woff'), url('iconfont.ttf?t=1591106386397') format('truetype'), / chrome, firefox, opera, Safari, Android, iOS 4.2+ / url('iconfont.svg?t=1591106386397#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-visible:before { content: '\e6a2'; } .icon-nickname:before { content: '\e6a0'; }

代码分析：

这段代码定义了一个名为 'iconfont' 的自定义字体，并通过不同的 URL 指定了不同格式的字体文件，以确保在各种浏览器和操作系统中都能正常显示。

代码还定义了一个 .iconfont 类，用于将字体应用到 HTML 元素。通过设置 font-family 为 'iconfont'，并使用 :before 伪元素插入字体图标的 Unicode 编码，便能在页面中显示自定义图标。

例如，要显示一个名为 icon-visible 的图标，可以在 HTML 中使用以下代码：

<i class='iconfont icon-visible'></i>

代码中定义了两个图标：icon-visible 和 icon-nickname，它们的 Unicode 编码分别为 '\e6a2' 和 '\e6a0'。在 HTML 中使用这些图标时，只需要在对应的元素上添加 .iconfont 和对应的类名即可。