iconfont使用方式Unicode和Font Class均显示方框

你遇到的问题可能是由于缺少字体文件或字体编码不正确导致的。请尝试以下解决方案：

1. 确保你已经正确引入了 iconfont 的字体文件。通常，你需要在 HTML 文件的头部中使用 `<link>` 标签引入字体文件，类似于：

<link rel="stylesheet" href="path/to/font/iconfont.css">

确保 `path/to/font` 是正确的字体文件路径。

2. 检查你是否正确使用了字体编码。在 iconfont 上，每个图标都有对应的 Unicode 编码，可以通过查看 iconfont 的文档或网站来获取。确保你在 HTML 中使用了正确的 Unicode 编码，并将其包裹在 `<i>` 或 `<span>` 标签中，例如：

<i class="iconfont">&#xe123;</i>

确保 `&#xe123;` 是正确的 Unicode 编码。

3. 如果你使用的是字体类名（Font Class）来显示图标，确保你在 HTML 中正确地应用了对应的类名。通常，你需要在 HTML 元素上添加一个类名，例如：

<i class="iconfont icon-xxx"></i>

确保 `icon-xxx` 是正确的类名。

如果上述解决方案仍然无法解决问题，可能需要进一步检查字体文件是否完整，并确保字体文件的路径和编码都是正确的。另外，还可以尝试清除浏览器缓存或尝试在其他浏览器上查看是否有同样的问题。

相关问题

iconfont用unicode编码放到代码里是空白的

如果你在使用 iconfont 时，将其编码为 Unicode 并将其放入代码中，但是在页面中显示为空白，则可能需要在 CSS 样式中添加一些特定的属性。具体来说，你需要在对应的选择器中添加 `font-family` 属性以及 `font-style` 属性，如下所示：

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
}

其中，`font-family` 属性中的 `"iconfont"` 是你在使用 iconfont 时设置的字体名称，`font-style` 属性设置为 `normal` 表示字体样式为普通字体。

如果上述方法仍然不能解决问题，你还可以尝试将 iconfont 文件放入网站根目录下，并在 CSS 样式中使用相对路径引用。例如，假设你的网站根目录下有一个文件夹叫 `fonts`，其中包含了 iconfont 文件，那么你可以在 CSS 样式中这样写：

@font-face {
  font-family: "iconfont";
  src: url("../fonts/iconfont.ttf") format("truetype");
}

这样，就可以将 iconfont 文件引入到页面中，并正确显示了。

vue 使用iconfont

Vue可以使用iconfont来显示图标。有几种不同的方式可以实现这个功能。一种方式是使用unicode码表示图标，这种方式比较不友好，需要去iconfont项目查询unicode码并在代码中使用。另一种更友好的方式是使用类似于font-awesome的封装，通过添加class来调用图标。这种方式利用before伪元素来显示图标。还有一种方式是使用symbol方式，这种方式支持多色图标。根据我的经验，在调试时先使用在线方式调试确认无误后再下载到本地使用，这样可以提高效率。所以，Vue可以使用iconfont来显示图标，可以根据具体需求选择合适的方式进行使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>