网站点赞功能,wordpress 更换语言,搬瓦工可以长期做网站,东莞网站推广模式#x1f680; 个人主页 极客小俊 ✍#x1f3fb; 作者简介#xff1a;web开发者、设计师、技术分享博主 #x1f40b; 希望大家多多支持一下, 我们一起学习和进步#xff01;#x1f604; #x1f3c5; 如果文章对你有帮助的话#xff0c;欢迎评论 #x1f4ac;点赞 个人主页 极客小俊 ✍ 作者简介web开发者、设计师、技术分享博主 希望大家多多支持一下, 我们一起学习和进步 如果文章对你有帮助的话欢迎评论 点赞 收藏 加关注 前言
之前我介绍过一款非常好用的前端开发图标字体库FontAwesome
但是除了它还有一款非常好用并且也是免费的图标字体库也是非常不错,并且我自己开发时也是经常在用那就是iconfont 阿里巴巴矢量图标库 毕竟也要支持国产嘛你说对不对!
官网地址: https://www.iconfont.cn/
如图 在使用之前必须先登录一下 没有账号的可以自己注册一下用手机直接注册就OK了 然后登录!
使用教程
下载图标字体
登录之后我们通常在菜单栏中选择素材库里面的图标库 根据需求自己选择!
如图 然后根据自己的需求找一组自己觉得合适的图标这里都有很多作者自己设计的图标字体
有单色图标和彩色图标
如图 这里我们一般采用的是单色图标, 因为可以根据自己的需求修改颜色彩色图标就固定好了的!
当我们选择好了一组之后点击进去然后鼠标放到某个图标字体上之后,会出现三个选项按钮
如图 具体意思如下:
加入购物车收藏直接下载
其中这里的直接下载就是直接把这个图标当成文件图片的形式下载到本地进行使用, 你也可以根据需求调整颜色和图标格式, 支持svg、ai、png
如图 但是这样使用太麻烦相当于图片一样了我们还是需要下载它的图标字体格式
所以我们先要把想要用的图标添加到购物车
如图 然后点击右上角的购物车小图标
如图 侧边栏会弹出一个购物车清单页面,我们选择的图标字体就在这里
因为阿里巴巴矢量图标库它这里是以项目为一个单位,所以我们添加的图标要打包成一个项目给我们使用!
所以这里就直接点击添加至项目
如图 然后自定义新建一个项目名称, 建议用英文
如图 接着会自动跳转到你自己账号的项目管理页面, 你所新建的项目和添加到项目中的图标字体都在这里!
如图 我们直接点击下载到本地 就可以得到一个zip压缩文件,至此图标的下载完成了!
使用本地图标字体
当我们下载好之后解压并且重命名一个你自己比较好记忆的名称!
然后你会得到一堆文件
如图 其实到这里就跟我们之前使用FontAwesome是一样的道理
我们只需要把这些文件拷贝到我们项目文件夹下就可以了!
如图 关于具体如何使用到我们的html页面中, 在打包解压出来的文件中有一个叫demo_index.html的文件
你可以打开它里面全部都是你刚刚所添加的图标字体和具体的使用方式
并且它这里提供了三种使用方式:Unicode实体编码方式、FontClass类名称调用、Symbol
如图 这里我就以Unicode实体编码方式、FontClass类名称调用方式演示一下
Unicode实体编码方式调用
Unicode是字体在网页端最原始的应用方式特点如下
支持按字体的方式去动态调整图标大小颜色等等。默认情况下不支持多色直接添加多色图标会自动去色。
我们可以使用CSS中的font-face在页面上引入图标字体
例如
font-face {font-family: iconfont;src: url(iconfont.woff2?t1706238093360) format(woff2),url(iconfont.woff?t1706238093360) format(woff),url(iconfont.ttf?t1706238093360) format(truetype);
}也可以直接把iconfont.css文件通过link标签引入到我们的页面中
link relstylesheet typetext/css hreficonfont/iconfont.css然后我们就可以使用了
调用方式
span classiconfontUnicode实体编码/span这里在标签中一定要加上class为iconfont才有效果
至于Unicode实体编码名称你可以在刚刚的案例文档中招到
举个栗子
style typetext/css#content {width: 300px;border: 1px dotted red;padding: 10px;margin: 100px auto;text-align: center;}
/stylediv idcontentspan classiconfont#xe614;/spanspan classiconfont#xe615;/spanspan classiconfont#xe616;/spanspan classiconfont#xe617;/spanspan classiconfont#xe618;/spanspan classiconfont#xe619;/span
/div效果如下 怎么样是不是很简单,你再也不用担心图标的问题了!
FontClass类名称调用
FontClass类名称调用方式其实是 Unicode 使用方式的一种变种, 主要是解决Unicode书写不直观语意不明确的问题
与Unicode使用方式相比具有如下特点
相比于Unicode语意明确书写更直观,可以很容易分辨这个icon代表什么意思!因为使用 class 来定义图标所以当要替换图标时只需要修改 class 里面的 Unicode 引用。
其实如果你仔细打开观察一下iconfont.css这个源码文件你就会知道其实里面就是对Unicode的有种封装
如图 调用方式
span classiconfont icon-xxx/span在文档页面中挑选相应图标并获取类名应用页面元素就可以了! 举个栗子
style typetext/css#content {width: 300px;border: 1px dotted red;padding: 10px;margin: 100px auto;text-align: center;}#content.icon-shujuzhanshi{color: yellow;font-size: 12px;}#content.icon-xiangouhuodong{color: pink;font-size: 14px;}#content.icon-pingfen{color: yellowgreen;font-size: 16px;}#content.icon-dianpukanbanmoren{color: blue;font-size: 18px;}#content.icon-youhuiquan{color: green;font-size: 20px;}#content.icon-XyuanhuodongD{color: red;font-size: 22px;}/stylediv idcontentspan classiconfont icon-shujuzhanshi/spanspan classiconfont icon-xiangouhuodong/spanspan classiconfont icon-pingfen/spanspan classiconfont icon-dianpukanbanmoren/spanspan classiconfont icon-youhuiquan/spanspan classiconfont icon-XyuanhuodongD/span
/div效果跟刚刚是一模一样!
并且你也可以通过CSS去自定义他们的颜色和大小可以说非常方便!
如下 最后
总的来说iconfont 阿里巴巴矢量图标库还是很不错的但是缺点可能就是版权问题,如果你是学习那应该没什么问题但是如果是商用那么最好在使用这些图标之前先咨询一下作者以免版权纠纷!
这一点我个人感觉确实是没有FontAwesome做得好,搞得不清不楚的真麻烦! 嘿嘿嘿~~ 点赞 ✍️评论 收藏❤️ 大家的支持就是我坚持下去的动力! 如果以上内容有任何错误或者不准确的地方欢迎在下面 留个言指出、或者你有更好的想法 欢迎一起交流学习❤️❤️ 更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️ 说不定有意料之外的收获哦..嘿嘿嘿、嘻嘻嘻!
