阿里巴巴-iconfont
首先请自行注册-这个是必须要的
1.找到自己想要的图标,鼠标移动到图标上,点击添加到库
2.选择完之后,点击右上角的购物车图标
3然后在右侧点击添加至项目
4.在 资源管理-我的项目 中可以找到个人主页的项目
这里主要说下Unicode的转换
开始进入时,会自动生成代码,如果没有,则点击红色字体,暂无代码点击生成
在自己的项目中新建文件夹styles下文件iconfont.css 把代码复制进来
修改代码
src: url('');src: url('?#iefix') format('embedded-opentype'),
改成
src: url('/t/font_340');
src: url('/t/font_340?#iefix') format('embedded-opentype'),
修改的/t/font_340是复制代码中有的,在要修改的代码下一行或者下下行,,,
url('#iconfont') format('svg');
也改成
url('/t/font_340#iconfont') format('svg');
添加代码
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-fenxiang2:before {
content: "\e86e";
}
样式名称自行修改.icon-fenxiang2
content: "\e86e"; 中的\e86e 是巴里巴巴中项目图标,鼠标移动到图标上会有,赋值代码来的,会是这样 改成上面的就可以了
这个文件就改完了
在app.vue中,添加这个
<style lang="scss">
@import "styles/iconfont.css";
</style>
在页面中使用的时候
<viewclass="count_btn iconfont icon-fenxiang2"></view>
里面的样式名称
icon-fenxiang2 就是你之前你自己定义的 样式名称
