位置: IT常识 - 正文

iconfont的N种使用方法(iconfont原理)

编辑:rootadmin
iconfont的N种使用方法 iconfont的使用为什么使用iconfont

推荐整理分享iconfont的N种使用方法(iconfont原理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:iconfont用法,iconfonts,iconfonf,iconfonf,iconfont symbol,iconfont用法,iconfont用法,iconfont用法,内容如对您有帮助,希望把文章链接给更多的朋友!

1、字体图标可以随意改变大小,避免图片放大失真问题,但是值得注意,修改字体图标大小的时候使用font-size属性,并且颜色可随意更改

2、字体图标相比于图片图标体积更小,所占空间也就更少,对于微信小程序这种体积不能超过2M的项目来说就特别推荐

3、减少请求次数,一个css文件可包含所有的图标,减少大量使用图片,刷新速度和加载速度更快

5、设计不需要提供多个场景图标,只需要维护一个项目图标库就行,方便开发者使用,提高开发效率,降低维护成本

网页web开发使用iconfont的3种方法

使用iconfont有三种方法,一般情况下都使用在线使用,减少代码量 iconfont官网地址:iconfont官网

第一种方法:icon 单个使用

对于刚学习网页开发的朋友们来说,可以采取这个方法,将我们的icon图标下载到本地,加入我们的放图标的文件夹,再引用就可以了。我们一起来看看怎么实现:

1.步骤一:打开iconfont官网,官网的图标我已经放在上面了。

建议可以使用微博账号登录,更方便。

2.步骤二,选择自己需要的图标,比如我找的登录图标

在主页的搜索框输入登录,然后点击回车

会出现我们的搜索结果,我们可以选择我们想要的图标,下面有翻页符号,可以慢慢寻找自己想要的图标

找到自己需要的图标后,点击下载 点击之后会弹出下载页面,按自己的需求点击下载,我这里下载的png格式

将自己下载好的png图片放到自己需要引入的项目图片文件夹下面,去到html文件中

相对路径的使用:./代表进入与当前文件路径一致的文件夹中;…/代表退出当前文件目录进入与父级目录相同的文件夹中;如果还需要再退到上一级目录,则继续使用…/来实现

在浏览器中打开,得到如下效果,可以通过我们的CSS样式对图片进行操作

iconfont的N种使用方法(iconfont原理)

第二种方法:unicode 引用

unicode是字体在网页端最原始的应用方式,特点是:

兼容性最好,支持ie6+,及所有现代浏览器。支持按字体的方式去动态调整图标大小,颜色等等。但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。1.步骤一:在iconfont主页里面找到自己需要的图标,加入购物车。

我们继续选择刚刚那个登录图标,如何搜索,在上一种方法中已经讲述过了,这里就不再说了

2.步骤二:点击导航栏上方的购物车图标,然后添加到项目中

也可以一次添加多个图标

点击添加项目之后会有弹窗,选择项目,再点击确定,页面会自动弹到该项目里面

3.步骤三:进入项目后

如果是新的文件夹,进入页面之后,需要点击生成网址代码

4.步骤四:生成代码之后,可以复制代码到相应的CSS文件中

4.步骤四:再定义使用iconfont的样式

.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}5.步骤五:使用自定义的标签,然后将对应的图标编码放在里面

当鼠标移入当前图标,会出现一个蒙版,可以点击上面的复制代码即可 进入网页中是现代代码 这个时候运行出来页面里面会有问题 原因是因为,我在引入项目下面生成的font-face时,里面的URL引入的网页地址不完整,因此我们要补全地址

再去页面里面刷新就可以了

注意:如果之后还要去页面里面添加图标,可以在生成代码哪里直接更新代码,再复制,可以将原本的代码直接覆盖掉,避免反复请求

第三种方法:font-class 引用

font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

与unicode使用方式相比,具有如下特点:

兼容性良好,支持ie8+,及所有现代浏览器。 1.相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。 2.因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。 3.不过因为本质上还是使用的字体,所以多色图标还是不支持的。

1.步骤一:这种方法前面的步骤与第二种方法相同,我就不重复了,从主页中搜索图标,然后加入购物车,再添加至项目;(这一步不会的同学参考第二种方法)2.步骤二:选择Font class,然后点击生成代码

3.步骤三:点击复制代码,到html中引用代码

在html中使用link标签引入复制代码,注意:由于复制的代码地址不完整,需要加上网页请求头(http:)

4.鼠标移入图标上,点击复制代码;将代码复制到html文件中

先复制图标代码 在页面中添加相关代码

5.步骤五:刷新页面得到图标

注意:此方法如果要修改图标大小采用font-size属性,并要使用!important强制改变

还有什么问题欢迎留言!!!!

本文链接地址:https://www.jiuchutong.com/zhishi/298690.html 转载请保留说明!

上一篇:【input】输入框事件总结(input输入框非空验证)

下一篇:元宇宙与AI能否相辅相成,打造一个全新的世界观(元宇宙与nft)

  • 个税待报解预算收入怎么使用
  • 事业单位交所得税是否可以报国高新
  • 房产税计入管理费用了,汇算清缴怎么调
  • 将自产货物赠送客户
  • 采购人员的差旅费计入采购成本吗?
  • 纳税调整会计处理
  • 代扣代缴通用缴款书怎么打印
  • 企业出资怎么填写
  • 高温费计税吗
  • 补交本年增值税计提
  • 确认委托代销收入会计分录
  • 核定增收和查账增收的区别
  • 公司购入汽车应交什么税
  • 销售企业需要交的营业税
  • 按计划成本发出原材料怎么算
  • 国有企业出租房屋管理规定
  • 网络信息化服务中心是干嘛的
  • 收到借款是承兑付款吗
  • 生产车间员工体检费怎么入账
  • 本年累计金额和上年金额
  • 工程会计做账流程及会计分录
  • 中药材免税还能抵扣收购发票
  • 本年固定资产投资额与不良贷款的关系
  • 公司作为二房东怎么给别人开发票
  • 社保公积金外包对员工的利弊
  • window10主题的颜色浅了
  • 出口企业免抵退是什么意思
  • 未开票收入缴纳增值税怎么冲减补开发票
  • 什么是坏账,坏账的核算方法有哪些
  • windows无法验证显卡驱动的数字签名
  • 最小巧的单反相机
  • php和aspnet哪个好
  • 固定资产折旧的计算方法
  • 小企业的费用包括生产成本吗
  • 退回以前年度多交的附加税怎么做分录
  • thinkphp3.2框架
  • 折旧和摊销的区别通俗
  • vuecdn方式引入
  • web开发 python
  • 勒索软件,网络不稳定
  • java实现电子发票
  • unrar解压命令
  • 为etc充值
  • 土地给人家种了几十年还能要回来吗
  • 销售返利计入销售费用
  • 汇算清缴的费用标准 中汇
  • 主营业务利润率标准
  • 一行的代码
  • 店面收回转让费怎么办
  • 科技项目专项资金
  • 国库券利息收入属于企业所得税纳税调整项目
  • 行政单位要不要税号?
  • 合并报表存货抵消
  • 财产转让收入属于什么收入
  • 只知道主营业务怎么办
  • 黄金入账如何做会计分录
  • 资产减值损失属于损益类的收入还是费用
  • 特许权使用费代扣代缴企业所得税
  • 所有者权益增加额怎么计算
  • jquery常用的事件绑定函数有哪些
  • win10怎么运行安卓软件
  • 两台苹果怎么用电脑把数据同步
  • linux AS3 oracle9i 安装指南
  • dgservice.exe是什么
  • 使用无线网络上网电脑的IP地址会改变吗
  • win7旗舰版64位系统无法进入安全模式怎么办?
  • 电脑windows8怎么样
  • ie9收藏夹
  • windows向microsoft报告
  • 如何在win7电脑上添加新的打印机
  • win7系统重启后黑屏不进系统
  • win10预览文件怎么显示内容
  • linux升级python2.7
  • javascript简介和语法
  • 关于javascript的说法
  • [置顶] [Android Studio 权威教程]Android Studio 三种添加插件的方式
  • js复制div
  • jquery的$作用
  • 农村医保网上如何查询
  • 省委巡视组收到的案件线索怎么分配
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设