首先确保根据官方的教程引入组件 并且保证功能可以使用 但是图标不显示 那你和我碰见的多半是一个问题了
注意时间 笔者写的时候为 2023/12/19 后续组件可能有相关变化
@font-face { font-family: "iconfont"; src: url('./font.ttf') format('truetype');
此处的font.ttf 推荐去下载完后存到本地
下载地址
下完之后还有可能不显示 ! 此处f12查看官方示例后 editor (dcloud.net.cn) 发现他的图标是有伪元素的
但是实际我在uniapp中编译为小程序 在小程序中 这个伪元素丢失了 原因不知道
解决办法就是引入下面这段css样式
`
.icon-zitijiacu:before {
content: "\ec8a";
}
.icon-zitixieti:before {
content: "\ec8f";
}
.icon-zitixiahuaxian:before {
content: "\ec8e";
}
.icon-zitishanchuxian:before {
content: "\ec8b";
}
.icon-zuoduiqi:before {
content: "\ec91";
}
.icon-juzhongduiqi:before {
content: "\ec84";
}
.icon-youduiqi:before {
content: "\ec87";
}
.icon-zuoyouduiqi:before {
content: "\ec94";
}
.icon-line-height:before {
content: "\e7f8";
}
.icon-Character-Spacing:before {
content: "\e964";
}
.icon-722bianjiqi_duanqianju:before {
content: "\e660";
}
.icon-723bianjiqi_duanhouju:before {
content: "\e65f";
}
.icon-clearedformat:before {
content: "\e67e";
}
.icon-font:before {
content: "\e684";
}
.icon-fontsize:before {
content: "\e6fd";
}
.icon-text_color:before {
content: "\e72c";
}
.icon-fontbgcolor:before {
content: "\e678";
}
.icon-date:before {
content: "\e63e";
}
.icon--checklist:before {
content: "\e664";
}
.icon-youxupailie:before {
content: "\ec86";
}
.icon-wuxupailie:before {
content: "\ec83";
}
.icon-undo:before {
content: "\e633";
}
.icon-redo:before {
content: "\e627";
}
.icon-outdent:before {
content: "\e6e8";
}
.icon-indent:before {
content: "\eb28";
}
.icon-fengexian:before {
content: "\ec7f";
}
.icon-charutupian:before {
content: "\ec82";
}
.icon-format-header-1:before {
content: "\e860";
}
.icon-zitixiabiao:before {
content: "\ec93";
}
.icon-zitishangbiao:before {
content: "\ec8c";
}
.icon-shanchu:before {
content: "\ec7b";
}
.icon-direction-rtl:before {
content: "\e66e";
}
` 然后我自己的大概已经ok了 有问题后续更新---