iconfont阿里巴巴图标的使用

第一步

使用github(用户名:hujiaoyue123,密码:Lov...04)登录http://iconfont.cn/home/index?spm=a313x.7781069.1998910419.1.19019531AIoim9

第二步

图标管理>我的项目>新建项目

第三步

图标库>添加入库>右上角购物车添加至项目

第四步

查看在线链接>点击复制代码

@font-face {
  font-family: ‘iconfont‘;  /* project id 385153 */
  src: url(‘//at.alicdn.com/t/font_385153_s3urf9j8kiqz1tt9.eot‘);
  src: url(‘//at.alicdn.com/t/font_385153_s3urf9j8kiqz1tt9.eot?#iefix‘) format(‘embedded-opentype‘),
  url(‘//at.alicdn.com/t/font_385153_s3urf9j8kiqz1tt9.woff‘) format(‘woff‘),
  url(‘//at.alicdn.com/t/font_385153_s3urf9j8kiqz1tt9.ttf‘) format(‘truetype‘),
  url(‘//at.alicdn.com/t/font_385153_s3urf9j8kiqz1tt9.svg#iconfont‘) format(‘svg‘);
}

点击下面图标的复制代码到

<i class="icon"></i>的&#xe625下面是实例

				
时间: 2024-10-13 11:30:53

iconfont阿里巴巴图标的使用的相关文章

阿里巴巴IconFont的图标的下载使用

目前项目开发都是vue+element-ui模式,由于elementUI的icon图标库种类不多又不好看,所以基本不使用其自带的图标.一般都是引入第三方的图标资源,例如:fontawesome.或者阿里巴巴的iconfont.由于fontawesome的使用,会使得会全部下载所有的图标信息,使得项目变大,因此建议使用阿里巴巴的iconfont图标库.阿里巴巴矢量图标库地址:https://www.iconfont.cn/home/index,里面有丰富的图标资源可选择. 用法: 1.直接下载.p

阿里巴巴图标的应用

今天研究阿里巴巴图标应用,发现阿里巴巴图标有三百多万个...... 网址:http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 下面介绍两种方式应用图标至网站中 1.文件下载保存项目应用法 做法: 先通过搜索框搜索自己需求的图标,点击图标中的购物车加入到购物车中 如下图下载压缩包至本地 解压后发现里面的文件如图 值得注意的是红色框的五个文件,unicode.html里面可以查看到图标的unicode编码,svg和css是

在uni-app中使用阿里巴巴图标库字体图标

阿里巴巴图标库 添加图标.下载.引入的使用方法: 1.添加图标 2.下载到字体图标文件后,复制圈中的两个文件到static目录下:         3.新建一个自定义字体图标样式文件: font-icon.css 4.给font-icon.css添加内容  5.font-icon.css具体代码: @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('[email protect

CSS3属性+iconfont字体图标的使用方法

CSS3属性文本阴影:text-shadow:水平阴影 垂直阴影 模糊度 颜色: 可以多组值共同存在,用逗号隔开多层文本阴影的设置:text-shadow:第一层,第二层,第三层: 文本换行: 在单词内部换行: word-wrap:: normal:默认值,不允许在单词内部换行. break-word:允许单词内部换行. word-break:: break-all 允许在单词内部换行 keep-all 允许在换行点换行,单词内部不换行盒子阴影: box-shadow:水平阴影 垂直阴影 模糊度

iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

iconfont字体图标的使用方法

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

iconfont字体图标使用方法

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

如何制作icon-font小图标

1.首先可以去iconfont.cn阿里巴巴矢量字体库中下载你想要的图标(选择格式为SNG格式). 2.打开iconmoon这个网站(这个样子的),然后点击右上角那个Iconfont App如下图: 3.上面有一个紫色的 Import Icons 点击上传你下好的 SVG 图标. 4.上传好的 SVG 图标会显示在下方的 Untitled Set 中,然后选择上方有个类似 笔 形状的图标,点击进入编辑.解释一下上面的选择器..鼠标箭头 表示 选择图标 .垃圾桶 表示 删除图标 ,一般选择垃圾桶,

如何使用iconfont字体图标代替网页图片?

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不