在html和vue中使用iconfont的symble色彩图标

在html以及vue中使用iconfont的symbol图标

  • 写给新手看的
    • 首先注册iconfont,并创建一个项目,在图标库把选择的图标加入项目
    • 可以选择使用在线链接,这里推荐下载到本地
    • 要注意使用class

写给新手看的

首先注册iconfont,并创建一个项目,在图标库把选择的图标加入项目

在html和vue中使用iconfont的symble色彩图标_第1张图片

可以选择使用在线链接,这里推荐下载到本地

  1. 在项目新建一个文件夹,同时新建一个css文件,把官网使用帮助里的css复制出来,粘贴到新建的css里面
    vue
    在html和vue中使用iconfont的symble色彩图标_第2张图片
    html
    普通项目
  2. 把下载的文件解压,选择里面的js文件,并在项目引入

vue
在html和vue中使用iconfont的symble色彩图标_第3张图片
html
在html和vue中使用iconfont的symble色彩图标_第4张图片
3. 最后根据官网帮助里面的标签使用:
vue
在html和vue中使用iconfont的symble色彩图标_第5张图片
html
在html和vue中使用iconfont的symble色彩图标_第6张图片

要注意使用class

此处复制的类名,比如:官方复制得来icon-taobao,你应该在前面加上**#**号替换模板里面的

你可能感兴趣的:(图标库,js,css,vue)