uniapp使用IconFont

将下载下来的文件夹iconfont.css复制到项目目录common中,
在iconfont.css中将引入其他文件的代码删除

@font-face {font-family: "iconfont";
  src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAUkAAsAAAAAChAAAATVAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDGgqHKIYaATYCJAMUCwwABCAFhG0HZhusCMgekiSBQAEFFOjBKvRMEXy/3+ueC0FyiUJ0wOOTEsmqOnb9sgiySqDQtR3PRrzh37N6nSyTGRe6uwysZIRgoeKlTT2A0jXYfh3gz3GDC7TKOGCObLH/55jp8vnA8tvWLhmNVTQcDXhAdRFJB1KB9fyYbxHPJoOOCT6ZQJcJMUTHRBUF5ijktQJxizdowJyAXsnAhQ5VW8KORbwCVUd67PEc8NL6/vgP1mMOSc3kDU9ulupBwS+/78TI4HTLNQMBBM1Zwe5GxiKgEFcS7ecgTnwRoutjn2E2u7oIfmV62kCRP9h8QpKr//PayPIewO5ri2USaBSCX6KQ+GUKmV8RHgx5xdW70E3MABAfiHqySWlSPk9eqZzrOekpkQfOkJqdqXToBkko+4amPlLT7+uYkPXiEOq8kMaEbZSGUW8Z9uNPGHcjHb5JFs5eKhZK9sup/SHMRlQQX3+Pb5bQcgW1XrHnQ+4GzCljD4TSW0IfOMlDKvZQOB3e4pY7eJuUUSnZTcq9rrwyF6YOhjFbwx7Ou/Bm8LXwdugd+/499eED7XazLlfLNXewIWUi1j0fMiG6fsuBY7JEbtYKG45g2MdtUpdLG+R+ON4mHc4PkW8G6/Tc26HGY25GWm8yFQvvc8TSm65Dvh+k4QanzOAeYm66elBho4zd5UobwD14rqa2P09BhcMgtY5gPk+vqRZuu2nB5qE+PVcfuYPZTYcwp2TDFjG1eceRCxjWTIcRatPy/x8N8KoIeVlNdUyMxrF+QwSvGnj0/3K1iahKO/jSzFxxoWKZHF2mSJjp9YhLW/pv4guCQBD80xeJ36QvNUx6zVxdpkDlCk2BOLc5p8SAw34D8Yylg3SDwhBRUCyaP19UzDG4utibCYZaJxMXzxHd6O9fAhIRxQHJnOABTraFb7mJDXj9dRZXewn3zjs9FA41y1vAfD2RH395YQ8zRm76tB6Bdzhw6VNokXIru5bMysrMZNexWwuVFSFtO2PPq02YH1w8tSV5QfAysjlZ9YCsrKvbrNxcW1dW+aCsKulyIOVN2pu522VSZkt4yfK7XoHkmoDyg58N7vH2876tvSyzLIYgB/Kyz+QtUQ0UVT5RDZXVEN8ElEfFec5c/eaHeBmdpLP5iN+ABwCa5fNIAQDN592IDIDm8mmPLwHycyTweVzJ1uf1+5f65PzbgZ2UiZ8t+tvyNSugeoEOicKCp09QsKt8RbKhFqlW40uO6qWP34y0SwnRQHYP+QyVo4XlHm7lqAdJu3HIOkwiC3YRqm6b0KbDHnRZQO7ebVgzRJROzBsjEAacgqTPd8gGvEAW7KdQjfkV2gwEAl0uRMABu00HjxY3Q00r1OPaLpzX2W2campF7dIGaGizaJr9IgvPwOYWPoQnxiWEUyS0weYmNmlpNyS1tnI412y34gQ5HbRY7Lij2W6CutY4Y2urIys+nku6ozid3QpQR5pBGq0gPZxWFxxPx86GM8a3QiNf3wAyaGOh0ZxR98POgJq14KfHJYqTUABJym2F6g6lukU7gyStGOXgOLbYzgpHoBWyKHE7nCN5mQmk0yqOsULUIUs89uOKyuO6V1r3seA9aCjftkaKHCVqtOm9bYTdRn6psU2j1diwDrseelavTt5W2r4Wbz2vq7slHQAAAAA=') format('woff2');}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shezhi_huaban:before {
  content: "\e611";
}

.icon-wode_huaban:before {
  content: "\e612";
}

.icon-xihuan_huaban:before {
  content: "\e613";
}

.icon-dianzan_huaban:before {
  content: "\e614";
}

注意,在format('woff2');后是个分号

使用:
在app.vue的style标签中引入@import './common/iconfont.css';

<text class="icon iconfont icon-shezhi_huaban"></text>
posted @ 2020-01-10 16:06  zhongfang99  阅读(597)  评论(0编辑  收藏  举报