1)、FontClass/Symbol前缀这个很重要,一定不要写成:el-icon-***这样的形式。 如果你写成这样的前缀,会和element-ui框架所带的图标(icon)冲突,导致你图标显示不出来 2)、FontFamily随便起一个名字,你能记住就行 4.项目创建完了,你可以往项目里面添加自己想要的图标了 1)、比如我想要一个设置的图标 搜索之后能...
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-password:before { content: "\e610"; } .icon-yonghu:before { content: "\e643"; } 12、挑选相应图标并获取类名,应用于页面: <iclass="iconfont icon-xxx"></i> 13、在element-ui输入框中使用我们引入的图标 <t...
<el-buttonstyle="margin-left: 4px"class="filter-item iconfont icon-zhuangtai"type="primary"size="mini"@click="exportExcel">设置状态</el-button>//注意:类名iconfont必须加 7、页面效果: 可以看到字体样式太大 8、修改样式: 看下修改后的效果: 可以看到和其他相同的效果; 注意:这里inconfont将图标作为...
如上图所示,如果不想输入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;} 那么直接可以使用下面的...
我们使用element-ui、vue开发网站的时候,往往图标是起着很重要的作用。 下面是vue、element-ui项目,如何使用阿里iconfont图标库的方法。 点击紫色按钮创建项目 image.png 图中画红线的地方很重要 1)、FontClass/Symbol前缀这个很重要,一定不要写成:el-icon-***这样的形式。
unicode:唯一标识,font文件内部的名称,在iconfount.css文件中自定义的icon名称(如gea-avatar-c-f与其构成键值对。 命名建议 同名图标一般分圆形/非圆形、填充/线条 -c 表示圆形 -f 表示填充 5 下载项目图标集文件 解包zip文件内容及使用说明 demo.css
1)、FontClass/Symbol前缀这个很重要,一定不要写成:el-icon-***这样的形式。 如果你写成这样的前缀,会和element-ui框架所带的图标(icon)冲突,导致你图标显示不出来 2)、FontFamily随便起一个名字,你能记住就行 项目创建完了,你可以往项目里面添加自己想要的图标了 ...
在iconfont.cn 选择好项目需要的icon,添加进项目,下载好font文件,然后在 全局scss代码里写上: @font-face { font-family: "zr"; src: url('../icon/download.ttf') format('truetype'); } .zr { font-family: zr!important; font-style: normal; ...
首先进入iconfont官网,进入你的项目,然后选择Unicode。就拿第一个上传的图标来说,复制下面的一串: 然后将e前面的‘ ’用‘\’代替,去掉分号,最后是这样子的:‘\e65a’ 最后在伪元素里面加上: .icon:before{font-family:iconfont;//一定要这样写content:"\e65a";} ...
[class^="el-icon-mo"], [class^=" el-icon-mo"] { font-family: "iconfont", serif !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> PS 每次新增或删除,特别是新增如果要引入新增的图标,要重新生成CSS文件...