使用iconfont图标

iconfont官网

使用:

  • 选择一种图标库
  • 将心仪的图标加入购物车
  • 选择完毕点击右上角的购物车图标
  • 新建或选择一个项目

在这里插入图片描述

  • 下载到本地(内置完整demo)

vue中引入:

  • 将下载下来的东西解压放到项目目录,你可以建立一个lib文件夹(个人习惯)
  • 如果是用symbol彩色图标,直接在对应的组件import对应路径即可,依赖 iconfont.js,不依赖 iconfont.css
  • 原始图标依赖 iconfont.css,推荐在main.js中加载

在这里插入图片描述
font-class引用方式
在main.js中加载css

import './iconfont/iconfont.css'

挑选相应图标并获取类名,应用于页面
必须是iconfont+类名的方式

<span class="iconfont icon-auto"></span>

类名的获取:在之前的图标页复制类名(使用什么方式加载,就复制哪一个类名)
在这里插入图片描述
运行效果:
在这里插入图片描述
其它引用方式


使用bootstrap图标

Bootstrap官网

下载:不要下载4.0可能会不兼容

npm install bootstrap@3

导入样式

//导入bootstrap
import 'bootstrap/dist/css/bootstrap.css'

选择样式,并复制样式名
在这里插入图片描述

<h1>这是app组件<span class="glyphicon glyphicon-pencil"> Edit</span></h1>

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐