uni-app中的字体图标引入

方式一：考虑兼容的

1.在app.vue引入字体图标（在app.vue引入的图标为全局图标）

		<style>
	
		    /*每个页面公共css */ 
	
		    @import url("./static/font/style.css");
	
		</style>

2.改变字体图标的style.css引入方式使用 ~@/绝对路径的方式

为修改前的style.css引入方式

		@font-face {
	
		  font-family: 'icomoon';
	
		  src: url('fonts/icomoon.eot?pr8w9y');
	
		  src: url('fonts/icomoon.eot?pr8w9y#iefix') format('embedded-opentype'),
	
		    url('fonts/icomoon.ttf?pr8w9y') format('truetype'),
	
		    url('fonts/icomoon.woff?pr8w9y') format('woff'),
	
		    url('fonts/icomoon.svg?pr8w9y#icomoon') format('svg');
	
		  font-weight: normal;
	
		  font-style: normal;
	
		  font-display: block;
	
		}

修改后的style.css的引入方式

		@font-face {
	
		  font-family: 'icomoon';
	
		  src:  url('~@/static/font/fonts/icomoon.eot?pr8w9y');
	
		  src:  url('~@/static/font/fonts/icomoon.eot?pr8w9y#iefix') format('embedded-opentype'),
	
		    url('~@/static/font/fonts/icomoon.ttf?pr8w9y') format('truetype'),
	
		    url('~@/static/font/fonts/icomoon.woff?pr8w9y') format('woff'),
	
		    url('~@/static/font/fonts/icomoon.svg?pr8w9y#icomoon') format('svg');
	
		  font-weight: normal;
	
		  font-style: normal;
	
		  font-display: block;
	
		}

3.在页面中使用字体图标我这里使用的icomoon字体图标库，（其他字体图标引入方式一样）

	        <view class="icon-books"></view>

方式二：不考虑兼容的使用类名引入
直接用css 文件 iconfont.css 文件放到项目里面
app.vue引入iconfont.css

		    /*引入字体图标*/ 
	
		    @import './common/iconfont.css';

修改 iconfont.css文件内容
删掉了很多兼容性文件按下图引入即可使用类名在页面使用字体图标这个是不考虑兼容的写法

		@font-face {font-family: "iconfont";
	
		  src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAfIAAsAAAAAEDwAAAd6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFJgqPYIxNATYCJANMCygABCAFhG0HgXwbuQ0jEbaDkeok+2dCNqcsT8myLGySsUht7AP3/fg7DUaqM8FTv4a+3b8HGEBQmTgqW0JNaAHY+NqqNrogTFn9K8q6ztwf72a9lGqQlpooVlVCUrktFRWy63DnULV1h3VBVsTn/xoAW3OFIHSEKT6fffJoi1mgdLI5Grr3p/9q257XvDbI+xjaX3s21tA4oIDGXkCBllhAuWcwPNrVCzUJV0OAlH5mkY2bMzCIMRhL0O7E0epSiB1iLCJViHlhwJGGPCEg1rt6A4DH2s/LbwiWGJTAwfbceiixAlZ9zJ8sJ6qvHFRwUIpTAm/HgQNmAQN5Hah+Bc5gzmrsNKir8QCgnUZ6+dDH+Gwv9I/fp1dYhVcHfov/ZNU1gNh8PP5ITC2089jR+PHHQkJKRk5BSQONNNGMwwgIiYbjH09BQgg7V7g/HKzmgadICAn4bIQUfD5CBr4AIQdfiFCAL0Iowf9G/NXg1wChEXwxQhN4IblKzmMgOKjSEQwqPkIAFYYQQoUjRFAdQIjhtxhB4E+WGKWxLV3HgUXQJXD/I/7F5kZCiMMRoNsHhEN5cJ4XUZ7krKSp0foaL91c5HnSaZ2Nlpt1d7VHZnliTSaAELgNW025Wo1rNIRKJVAqdaKdACaGv/mqcIS0ePxXgUxk+qBMVfTo9/yH1ReUjvOqxMsalwU1dkROKiSnRaeqUfE20XYqVbKT3JH/MRs86ItUYfjIyrYxM8F2iQ8xOrFjqdxo6ZSl7vhpN+ZWhY3ehLxHj6lbfUKNIIua5IsqJxApI1UqAKkUZYhHEITUVCPkaDEimZkXh84EzmwLqgxX8LgJ8z3+crVYydrlKx0DqD90xxam70ruOyAz9+q7zcaGgCMAGetgQAVUvANBuvN9z8NnbTGqxGu7Zb50mymNotFYTJ6s0EIp5WKpqannPtYZ1jZXLXoRQpqjLbqf+Uj38mkr7bFTrrQVubXOpMKjlKZNxyXL46KxpeLOTO4s0qJRSmla9PbTIha2Tam+p9b4EGyjZG7+9MXLTXeS3sRZEQ/jnGNxQX7pgie2TeTFkpNc4rakn8ZoBWHSFQRBcweUczQytKhA0MsARcqBhpSLtw32utupWxWkvHzplOi0RP9lVbghRpA7UAaOAnUNHaHh9CJUSEVQgSHCyH9502Yc41RXNldVszFBeRVXQLDLOQTOrWzGiXoBRhCCdgxfnS1GhoaQYk5QiPIgK4AdjxQUIGDEUyIG0U5nreF5RrJpMrjhWoA15ztcceSsF6QTZAvP5uTY2krcs9TNemp0I4H22P3/fQbTlslQltC5NjwFNvnZnY97/kvK3vJ3kOWWpBzXmPAeaZ1HICmfh7kQFNCQOfreQQe5AAAn+9p8k30jHfj8nz8xvmGkj3cSf73D0E5/ju5m3Sq9zXocv95t//gaGcwiD9NIYhRZ09c4CfCWFOVs1sGaqTH2Ol1NZr8kNQGkuH//L7emKh17WszcOBqJjhNblDW2wOqnccqNG5RxTgBRHmQFxAxRtm6lgDFEiaDTr1ScdvUP3m4Gk/EREpU6L0ttaOWeYzP2YflCvnf2+h9b/4632XQt86wzz1TGk00o9VpDENpdenxwVZNnYbY9gONP1hvfdf8GwqdPncfh0jm19oYqrhpXfxqmeR+0OOhNM+5x7b67QyaScblgBlB75VbfrU2bvvPNBOY3pL3M8r7Hxd2MjQu+dz8h08/Zt9NE8sTrXz/X/fxg3IDe5a4S7JtZghzWQvCBnaWAnX0y/xGuFNGzcPtHCLj4zhGukFNiqOTt43kN87x5MDzMvEN3pt9hzoWEh7iCQuJd5yFEERSsGHje9f0bnIbbeLF/O3zjnbISfkq3QVIweEyk4MozCA0BfCCMjzzlqbmZETJqzJF880MYrN4zN3vqr4YDNW7GTRBzYqKtMpraZrVWDtffzbUAE/0OUK853pMH4LboXS39uH5OP6Bq7oxTu00VUZE7oa4d+awxuyt6Btt16DyAntdRGtsR91agV/gQLd+JAqDcrzblyce2M0JD1r84s2Dbx7+HHxFis9VrhjRTEpOOJRWT7k5sa5nckF8aY7b8sYigaBMokQsub+EEiVOBlC+Ce5S+ma/Vc9sSU26M3DYLKhF90BEzCix+FgZkLMCQmBWYMsOW4zNaOIdDLAGmuSlAoZGXUCl5Ax2NfAAW/wUGtPMXhjSKgym7xeSMGePby9GrN8ZBcIZxD3aipESZXOntv1Gvw8B2mlbyj5ytDZqydvu+MCEXsU/e6FZEgWKK8ClcD0MgWJgcTlIakWVVVSpo33KieHD1xjiIUnMGxn1rO1FSy8uV5/u/Ua/DwBHD/rT+R8529UBDSZ0AfLFTomGb0jVvdIsQpQKpL1MEPokSA3cTsARv5nCSEpPBuayoyHQqKbusnhvn/wogZZ/WIipOTAIJJZJYEkklk1wKKaVBGqVJmqVFWpk+Ybcfu4B0Nw92VEuysTt7J309zDNjzsFmOZ0CTf5EE80ndhlkZ7DJX0xGSMQk+TK7pRDMi4FsTGpeMS3mHvOAecQ8YZ4xL6rXgwMA') format('woff2')
	
		}
	
		.iconfont {
	
		  font-family: "iconfont" !important;
	
		  font-size: 16px;
	
		  font-style: normal;
	
		  -webkit-font-smoothing: antialiased;
	
		  -moz-osx-font-smoothing: grayscale;
	
		}
	
		.icon-icon_yulan:before {
	
		  content: "\eb8a";
	
		}
	
		.icon-daibanshixiang:before {
	
		  content: "\ec4e";
	
		}