uniapp Editor组件图标丢失问题

171 阅读2分钟

首先确保根据官方的教程引入组件 并且保证功能可以使用 但是图标不显示 那你和我碰见的多半是一个问题了

注意时间 笔者写的时候为 2023/12/19 后续组件可能有相关变化

@font-face { font-family: "iconfont"; src: url('./font.ttf') format('truetype'); 此处的font.ttf 推荐去下载完后存到本地 下载地址

下完之后还有可能不显示 ! 此处f12查看官方示例后 editor (dcloud.net.cn) 发现他的图标是有伪元素的

image.png 但是实际我在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了 有问题后续更新---