* 1. 在阿里矢量图标站创建一个项目, 并添加图标(这一步非必须, 创建方便项目图标管理) * 2-1. 添加icon, 选中新增的icon图标, 复制代码 -> 下载 -> SVG下载 -> 粘贴代码(重命名) * 2-2. 添加icons, 下载图标库对应[iconfont.js]文件, 替换项目[./iconfont.js]文件 * 3. 组件模版中使用 [<icon...
2.将上面第六步中画红线的文件拷贝到icon文件夹中。 3.找到项目中的main.js文件,导入iconfont.css样式 4.打开iconfont.css文件你会看到, 上面的是,你创建项目时候定义的字体,下面的是你一会要引入的样式类名(就是你想要的图标) 5.ok我们这回终于可以引用图标了 //记住别写错!! 在这里可以根据这个类名改变这...
我们在项目中使用 fontclass方法,因此需要用到下图中画红线的五个文件。 9、在项目src/assets文件夹下,创建一个名为icon的文件夹,把需要用到的五个文件拷贝进去 10、在项目的main.js中引入图标样式文件 import './assets/icon/iconfont.css'; 11、iconfont.css文件中 .iconfont 类 设置我们引入的图标的整体的样...
如上图所示,如果不想输入miracle 类,那么可以打开iconfont.css文件添加类,如下: [class^="el-icon-custom"], [class*=" el-icon-custom"]{font-family:"miracle"!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} 那么直接可以使用下面的...
简介:VUE element-ui之使用外部图标---iconfont篇 步骤: 1、进入iconfont官网传送门并使用任意方式登录。 2、按如下步骤进行: 3.图标库建好后直接搜索自己需要的图标按如下步骤: 4、将文件解压后,在项目assets下新建文件,将解压文件放入 5、在main.js中引入: ...
1 登录iconfont 2 配置自己的项目 3 搜索并添加 4 编辑图标名称 5 下载项目图标集文件 6 更新引用图标的项目文件 7 使用 8 图标名称查询 1 登录iconfont 网址:https://www.iconfont.cn/ 2 配置自己的项目 FontClass/Symbol前缀:这里的内容就是在自己项目中引用具体icon名称时添加的前缀。icon名称定义见下。
1、下载对应文件 2、将文件解压后,在项目assets下新建文件,将解压文件放入 3、在main.js中引入 import'./assets/icon/iconfont.css' 4、在标签中使用类名引入图标: //注意:类名iconfont必须加<el-buttonclass="iconfont icon-shoudongbiaozhu"type="primary">手动</el-button>...
element-ui 配置iconfont 在iconfont.cn 选择好项目需要的icon,添加进项目,下载好font文件,然后在 全局scss代码里写上: @font-face { font-family: "zr"; src: url('../icon/download.ttf') format('truetype'); } .zr { font-family: zr!important;...
1.iconfont图标 首先进入iconfont官网,进入你的项目,然后选择Unicode。就拿第一个上传的图标来说,复制下面的一串: 然后将e前面的‘ ’用‘\’代替,去掉分号,最后是这样子的:‘\e65a’ 最后在伪元素里面加上: .icon:before{font-family:iconfont;//一定要这样写content:"\e65a";} ...
{font-family: "iconfont"!important; font-size: 16px; font-style: normal; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing: grayscale; } 绿框的数据保持一致就好 2.上边设置好以后,打开vue项目,我是在src-assets下创建了icon文件夹,将所有的文件复制了过来 ...