如何使用iconfont的CDN（细讲）

最新推荐文章于 2023-09-11 20:26:40 发布
最新推荐文章于 2023-09-11 20:26:40 发布
阅读量5.1k 收藏 4
点赞数 2
分类专栏： inconfont cdn 文章标签： 细讲 inconfont
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42964517/article/details/83108561
版权

如何使用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标签，然后将生成的链接加入进去就可以了

qq_42964517
关注
专栏目录
把iconfront的资源放cdn访问_详解mpvue小程序中怎么引入iconfont字体图标
weixin_35668334的博客
01-14 534
前言iconfont阿里巴巴矢量图标库是我很喜欢的一个网站，可以下载/在线编辑/上传自己需要的矢量图标，也支持团队协作，那么在mpvue项目中如何引入呢？将图标加入购物车搜索关键词可以是中文也可以是英文下载素材点击网站右上角的购物车图标，此处我们选第三个ps:添加到项目很有用，可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等，此处我们选择加入项目并下载代码文件解压一般网页中为了兼容性考虑，我...
html+css+js基础问答
qq_43751465的博客
08-26 5242
css3 1.标签语义化 顾名思义，合理的标签干合适的事情 块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot 行级（display：inline）：a、span、small、strong、em、i、code、 行内块（display：inline-block）：img、input 区别： 1.
vue引入iconfont的方式
TZ1284063988的博客
12-09 1734
这里写目录标题1.通过引入cdn实现2.通过引入静态样式文件实现 1.通过引入cdn实现 1.加入项目后选择font css 2.index.html引入 <link rel="stylesheet" href="//at.alicdn.com/t/font_2174515_1wy2zflzlu9.css"> 3.页面使用 <span class="iconfont icon-zhuye"></span> 2.通过引入静态样式文件实现 1.浏览器打开上面的链接，复
图标CDN
02-14
图标CDN
cdn引入的iview UI框架——自定义icon（iconfont）
m0_52309519的博客
03-13 690
cdn引入的iview自定义icon（iconfont）
iconfont 的使用方法
晴天有点孤单
05-30 1196
iconfont文件放在静态资源assets下面，每次更新更新iconfont 文件夹就可以 页面操作如下 不喜勿喷 &lt;template&gt; &lt;div class="main"&gt; iconfont &lt;ul&gt; cdn远程iconfont &lt;li class="iconfont"&gt;&a
cdn方式引入element-plus icon
jerryyang_2017的博客
07-06 4159
浏览器直接引入element-plus使用icons-vue cdn引入element-plus使用icons-vue cdn引入element-plus使用icons 浏览器引入直接使用element-plus的icons
2022年Web前端开发流程和学习路线（详尽版）
weixin_47367099的博客
06-13 9246
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个
曾经面试踩过的坑，都在这里了～
画漫画的程序员∙苏南
10-18 2988
前段时间面试(包括阿里巴巴的电话面试)，遇到过一些面试题，且面试中出现机率较高的提问/笔试，有些答的不是很好挂掉了，今天终于有时间整理出来分享给大家，希望对大家面试有所帮助，都能轻松拿offer。 !&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; 主要分三部分：html、css、js；react/vue等都归类于js,内容来源于面试过程中遇到的、在复习过程中看到认为值得加深巩固、群友交流分享的；如有理解的错误或不足之处，欢迎留...
前端面试题
热门推荐
qq_41887655的博客
08-08 2万+
前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 21 Quirks模式是什么？它和Standards模式有什么区别 21 div+css的布局较table布局有什么优点？ 22 img的alt与title有何异同？ strong与em的异同？ 22 你能...
antd-iconfont:无需使用alicdn即可使用Ant Design的iconfont
05-13
可以使用不带alicdn的Ant Design的iconfont。 安装 yarn add @whtsky/antd-iconfont 用法 在您的webpack配置中： { test : / \. less $ / , loader : [ { loader : require . resolve ( 'css-loader' ) , } , { loader : require . resolve ( 'less-loader' ) , options : { modifyVars : { '@icon-url' : '"~@whtsky/antd-iconfont/iconfont"' } , javascriptEnabled : true ,
CDN及CDN资源访问流程简介
m0_48506962的博客
12-15 1701
CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"(边缘服务器)，使用户可以就近获取所需的内容，解决Internet网络拥挤，加快用户访问网站。从技术层面上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题所造成的用户访问网站响应速度慢的现象。 CDN资源访问流程是什么样的? 使用了CDN服务后，用户的访问流程如下图所示： 　　 用户向浏览器提供要..
【iconfont图标】vue引入并使用阿里巴巴iconfont图标流程【uniapp引入iconfont真机APP不显示问题解决，移动端引入报错解决】
seeeeeeeeeee的博客
11-28 5102
为什么要使用阿里图标库： 图标现在是很多地方都会用到的 一般我使用的时候都是直接在ui库中比如elementul自带的一些 有时候哪怕是感觉图标不是非常适合也是用的elementul图标，主要原因是懒 因为能直接复制的，就懒得再去阿里图标库下载遍，差不多就行了。 但是总有些时候你需要的图标是真的在elementul里没有的或者完全不适合的。 这时候我们需要去到阿里的图标库里找找，这里的图标非常多，完全可以满足一切需求了。1，Unicode：兼容性好，ie低版本也好用，可以和文字一样调整颜色和大小。缺点是不显
iconfont阿里云的使用
weixin_30410999的博客
12-28 193
首先我们要找到网址：http://iconfont.cn/，这里我用的是我的新浪微博登录的，为什么呢？因为我忘记我github的账号了哈哈哈··· 然后找到自己想要的图标或字体，比如我想要user的图标 然后点击加入购物车 然后去找自己的购物车 添加到新项目 新建一个 生成代码 复制代码 @font-face { font-family: '...
百度面试官：给我说是CDN加速的原理？
weixin_49114080的博客
11-22 688
一、什么是 CDN CDN 的全称是(Content Delivery Network)，即内容分发网络。其目的是通过在现有的Internet中增加一层新的CACHE(缓存)层，将网站的内容发布到最接近用户的网络”边缘“的节点，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等原因，提高用户访问网站的响应速度。 简单的说，CDN 的工作原理就是将您源站的资源缓存到位于全球各地的 CDN 节点上，用户请求资源时，就近返回节点上缓存的资源，而不
国内可用的css,js,图标字体,等常用前端公共库CDN服务
小允子的博客
04-26 3658
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的
Font Awesome图标CDN引用链接地址
最新发布
fuwuqiba的博客
09-11 2281
Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。使用前缀 fa 和图标的名称来放置 Font Awesome 图标。2、海外推荐 CDN。
【CSS】阿里iconfont的使用方法（另附font-family引入方法）
weixin_42771853的博客
12-21 1万+
介绍在 CSS 中引入阿里 iconfont 图标的方法（另附通过font-family引入的方法，无需声明class）
网站加了CDN后，字体图标报错Access-Control-Allow-Origin
OldCat先生
06-29 577
网站加了CDN后，字体图标报错Access-Control-Allow-Origin,原来直接修改CDN的配置就可以搞定
vue使用iconfont
02-16
在Vue中使用Iconfont，需要先将Iconfont的字体文件和CSS文件引入到Vue项目中。可以使用CDN或者将文件下载到本地后引入。 接着，在Vue组件中通过引入Iconfont CSS类名和Unicode编码来使用Iconfont。可以在需要使用Iconfont的地方使用<i>标签，然后添加相应的类名和Unicode编码，例如： ``` <i class="iconfont icon-heart"></i> ``` 其中，"iconfont"是Iconfont CSS类名，"icon-heart"是相应图标的Unicode编码。Unicode编码可以在Iconfont的网站上找到。 需要注意的是，在使用Iconfont时，字体文件需要正确引入，否则无法正常显示图标。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值