阿里在线免费图标库的使用

本篇文章主要是阿里图表库的初始使用记录【网址】
使用流程大概是这样的:
    登录了之后,你根据项目创建一个图标库。
    然后直接搜索你需要的图标,选择加入这个图标库。
    在本地使用的时候,你可以吧这些图标文件下下来,或者直接在css里面使用链接,只要联网就能用了,等到本地部署的时候再下下来。

详细使用流程

1、打开网址https://www.iconfont.cn
在这里插入图片描述
一进去的界面大概是这样,然后就可以直接搜索你需要的图标。
在这里插入图片描述
选择第一个添加到库,添加了之后,在右上角一个购物车里面就会有这个图标。将需要的图标添加好之后,点击那个购物车图标。
在这里插入图片描述
在这里插入图片描述
选择添加至项目会先提示你登录(已登录不用管),登录后会提示你创建一个项目,选择已创建的项目,将图标添加到里面。
在这里插入图片描述
添加到项目中后,可以选择将图标文件下载到本地使用,也可以直接引用网络文件。
在这里插入图片描述
远程使用的时候,点击查看在线链接。然后再点击生成代码。
在这里插入图片描述
然后将这串代码复制到你本地的css文件中去,注意:在远程引用的时候需要在每个url的路径前面加一个http才能引用如: url(’//at.alicdn.com/t/font_1318125_sm3f4a6wnl.ttf’) format(‘truetype’), 需要更换为: url(‘http//at.alicdn.com/t/font_1318125_sm3f4a6wnl.ttf’) format(‘truetype’),
本地的引用使用相对路径即可。
引用好了相应文件之后,在html页面中使用图标。

<i class="iconfont">&#xe600;</i>

如上就可以在页面中显示一个图标了,class在项目的配置中,可以编辑项目更换,标签里面的代码在项目中收藏的图标下面。
在这里插入图片描述
@快乐是一切

### 阿里巴巴矢量图标库使用教程 #### 图标的选择与添加 为了在工程中使用阿里巴巴矢量图标库,首先需要访问其官网并搜索所需的图标。找到目标图标后,可以通过点击类似于购物车的按钮将其加入收藏列表[^2]。随后,在个人账户下的“我的项目”部分可以管理这些已选中的图标,并将它们正式添加到具体的项目当中[^3]。 #### 引入方式 有多种途径来引入阿里云提供的矢量图标资源: 1. **通过在线链接的方式**:这种方式最为简便快捷,只需复制官方给出的相关CSS链接地址嵌入HTML文档头部区域即可完成加载操作。 2. **本地文件形式导入**:对于离线环境或者追求更高性能优化的应用场景来说,则可以选择下载整个字体包及其配套样式表至服务器端再做进一步处理[^1]。 3. **npm/yarn安装依赖**:现代前端开发流程下推荐采用此方案实现自动化构建工具链集成支持[^4]。 #### 基本调用语法 当成功配置好上述任一接入手段之后,在实际页面编写过程中只需要遵循特定命名规则定义类名属性值为`iconfont`以及对应具体编码字符集表示法(Unicode 或者 自定义别名),例如: ```html <i class="iconfont icon-example"></i> ``` 如果发现显示效果尺寸不符合预期需求,还可以额外追加辅助修饰样式的声明语句以调整视觉呈现比例关系: ```css .icon-large { font-size: 2em; /* 放大两倍 */ } ``` 最终组合起来就是如下实例演示片段: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>IconFont Example</title> <!-- 远程CDN --> <link rel="stylesheet" href="//at.alicdn.com/t/font_XXXXXX.css"> <style> .custom-style{ color:red; font-size:30px; } </style> </head> <body> <!-- 单独应用 --> <span class="iconfont"></span><br/> <!-- 复合样式 --> <div class="custom-style"> <i class="iconfont icon-home"></i> </div> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值