在vue项目中使用图标文字

た入场券 2024-04-18 15:17 8阅读 0赞

字体图标可以从阿里巴巴的矢量图标库里下载:

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1

比方说我需要一个搜索图标，可以把其先添加到购物车

![1693641-20190612145805190-1416625336.png][]

在项目里可以把添加过去的icon下载下来

![1693641-20190612150203588-525219007.png][]

下载下来的压缩包解压出来有这么多文件:

![1693641-20190612150256505-393757093.png][]

其中有用的就这一些：

![1693641-20190612150311314-1715947429.png][]

打开VUE工程的\\src\\assets\\styles目录（具体目录各个项目可能不同，总之放在和样式有关的下面就对啦）

新建一个iconfont文件夹保存全部的字体图标,把iconfont.css单独拿出来和其他css放到一起

![1693641-20190612150535143-1968993968.png][]

打开iconfont.css文件，把这个文件引用的字体图标文件路径修改正确，data前缀的不用改

![1693641-20190612150703876-145926186.png][]

在main.js里引入这个css,在之前我也引入了fastclick解决移动端点击事件(需要事先cnpm install fastclick --save)，reset.css,border.css具体做什么用的下图注释里写明了

![1693641-20190612151437308-2000191898.png][]

然后在组件里面需要使用字体图标的元素上面加上iconfont类名

![1693641-20190612151120747-355795109.png][]

![1693641-20190612151244381-1235993090.png][]

把复制出来的代码直接粘贴到元素中就行啦，当然也可以使用前面css自动生成出来的class类名

![1693641-20190612151329918-261250062.png][]

到此为止字体图标的使用基本就结束了

接下来使用stylus快速编写样式代码，和使用less，scass差不多，可以在存放css的文件夹新建一个global.styl文件,用于存储一些公共的变量

![1693641-20190612151925937-1393963486.png][]

引用一下这个文件,注意一下stylus的样式嵌套是不用加中括号和冒号分号的，之前写less写习惯了才加上去的

![1693641-20190612152028726-1427934260.png][]

在这里reset.css里吧font-size定义成了50px，所以如果设计稿是750px的宽度的话直接把设计稿上的宽度/100加上rem就是适合的单位啦

因为header.vue组件在main.js里被引用，所以引用stylus的路径可以这样改写

![1693641-20190612152944712-1591005486.png][]

由于这个路径经常用到，所以可以在webpack,base,config.js中将其保存起来

![1693641-20190612153031739-60085601.png][]

对webpack的修改都需要重启服务器，否则会报错，这里需要注意

有了这个变量就可以直接在需要这个路径的地方做修改了

![1693641-20190612153144114-965531977.png][]

修改如下：

![1693641-20190612153220604-386669810.png][]

如下

![1693641-20190612153249519-219708473.png][]

到这里一个头部搜索的组件就做完了

![1693641-20190612153345078-1219201472.png][]

[1693641-20190612145805190-1416625336.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/797a3db40ff34ebca17e1ef7d7e8586a.png
[1693641-20190612150203588-525219007.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/3779757ed5dc4913943342ad7c8e630e.png
[1693641-20190612150256505-393757093.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0caf18fe4bd84e4dbaec28029f4d6503.png
[1693641-20190612150311314-1715947429.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/36c83c0691e249fdaeb0253de0093ace.png
[1693641-20190612150535143-1968993968.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e00a9c107a844cca90ac27fb393f9f65.png
[1693641-20190612150703876-145926186.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6b6d104c923746709cc9ebb989ff9b12.png
[1693641-20190612151437308-2000191898.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b132b7f0877b4f3da9b71c8baf10b16d.png
[1693641-20190612151120747-355795109.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/cc1c27ec86154773b87c79fe813910e0.png
[1693641-20190612151244381-1235993090.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a2d5b0f7e18946c484093d2e7574ff67.png
[1693641-20190612151329918-261250062.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d91706b3a1544616b9384bda08585350.png
[1693641-20190612151925937-1393963486.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/69d3b067abc6419a8255425b713b4f47.png
[1693641-20190612152028726-1427934260.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f0c44feb99054f51b2ed8d45ef54b8aa.png
[1693641-20190612152944712-1591005486.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5d4b120a35ab4ffcad860fd20f7e35df.png
[1693641-20190612153031739-60085601.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fe87a5e58adb4466890d2647962d8e98.png
[1693641-20190612153144114-965531977.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2a239aa05f9d48e78d82f385d438ff9c.png
[1693641-20190612153220604-386669810.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4bfa6b2499ef4db1880e86e3cd128160.png
[1693641-20190612153249519-219708473.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1c02a5a54c834138a2344a8f8fc696b8.png
[1693641-20190612153345078-1219201472.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e3c1ac62e3044a4885274aaef5527cbc.png