如何使用iconfont的CDN(细讲)

如何使用iconfont的CDN

iconfont作为阿里的图标库,在开发过成功用的已经是非常广泛了,但iconfont并不需要将图标下载后使用,而是可以直接用cdn引入使用,至于使用流程,请看下文。

  1. http://www.iconfont.cn/ 搜索想要的图标,点击加入购物车。
    在这里插入图片描述
  2. 在加入购物车之前,如果没有在iconfont简历图标库的小伙伴还需要先建立一个图标库。
    点击图标管理,里面有项目,创建一个即可。
  3. 在购物车中选择添加至项目
    在这里插入图片描述
  4. 选择一个项目之后
    在这里插入图片描述
    点击下方新icon来袭,点击更新代码
    在这里插入图片描述
  5. 在index.html中加入更新代码后的连接

    在这里插入图片描述
    我用的是class所以使用link便签引入,如果用symbol就可以使用script标签。

**

2019-05-27补充

**
如果要在vuecli3中使用,只需要找到
在这里插入图片描述
在public下的index.html中添加一个link标签,然后将生成的链接加入进去就可以了

### 如何将图片上传至CDN #### 选择CDN服务提供商 为了实现高效的静态资源分发,通常会选择知名的CDN服务提供商。常见的服务商包括阿里云、腾讯云和AWS CloudFront等。这些平台提供了稳定可靠的加速网络和服务质量保障。 #### 创建并配置对象存储服务(OSS) 大多数情况下,CDN会与对象存储服务配合使用来托管静态文件。以阿里云为例,在控制台创建一个新的Bucket用于存放待发布的图片资源: 1. 登录阿里云官网进入管理后台; 2. 寻找并点击“产品与服务”下的“对象存储OSS”选项; 3. 点击左侧菜单中的“Bucket列表”,再点击右上方的“创建 Bucket”按钮完成新建过程;注意设置好地域位置以便后续更好地利用边缘节点进行访问优化[^1]。 #### 设置权限策略允许公共读取 为了让外界能够通过URL直接获取到所上传的内容而无需额外认证授权,则需调整bucket对应的ACL属性为公开可读模式: ```json { "Version": "1", "Statement": [ { "Effect": "Allow", "Principal": "*", "Action": "oss:GetObject", "Resource": "acs:oss:*:<your-account-id>:<your-bucket-name>/*" } ] } ``` 此JSON文档定义了一条语句,授予任何主体执行`GetObject`动作的权利,即可以从指定的对象存储空间中检索任意对象的数据流[^4]。 #### 将图片上传至OSS 可以借助多种途径把本地计算机里的图像素材迁移到云端仓库里去。一种简便的方法就是运用图形界面化的客户端工具如Aliyun OSSutil来进行批量处理作业。当然也可以编写脚本调用API接口自动化整个流程。 对于小型项目而言,直接在浏览器端操作或许更为直观便捷——只需前往对应的服务面板找到目标容器之后按照指引拖拽文件夹或者单个item上去就好。 #### 绑定自定义域名并开启CDN加速功能 当所有准备工作都就绪以后就可以着手准备关联个人站点地址了。这一步骤涉及到DNS记录修改工作,具体来说就是在注册商那里新增一条CNAME类型的解析项指向由厂商分配给用户的子域名称。 最后不要忘记激活内容分发网络开关从而正式启用这项增值服务特性。一般来,只要一切设定无误的话很快就能享受到显著提速带来的良好体验效果了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值