位置: 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)

  • 京东卖假货怎么联系京东平台的客服

    京东卖假货怎么联系京东平台的客服

  • 快手评论过的作品怎么找到(快手评论过的作品删了怎么看评论)

    快手评论过的作品怎么找到(快手评论过的作品删了怎么看评论)

  • 发出的抖音怎么删除(发出的抖音怎么删除掉)

    发出的抖音怎么删除(发出的抖音怎么删除掉)

  • 快手特别关注是什么意思(快手特别关注是谁设置的)

    快手特别关注是什么意思(快手特别关注是谁设置的)

  • 手机老是有外地的骚扰电话怎么办(手机老是有外地电话打进来)

    手机老是有外地的骚扰电话怎么办(手机老是有外地电话打进来)

  • 戴尔笔记本内存条怎么拆(戴尔笔记本内存条怎么装)

    戴尔笔记本内存条怎么拆(戴尔笔记本内存条怎么装)

  • 和通讯录会员有什么用(和通讯录会员有什么区别)

    和通讯录会员有什么用(和通讯录会员有什么区别)

  • 华为nova7pro怎样使用耳机(华为nova7pro怎样投屏到电视)

    华为nova7pro怎样使用耳机(华为nova7pro怎样投屏到电视)

  • 微信发送频繁多久解除(微信发送频繁多久解除7天后可以自动解除吗)

    微信发送频繁多久解除(微信发送频繁多久解除7天后可以自动解除吗)

  • 视频家庭网支持几个人同时在线沟通(家庭支持网络)

    视频家庭网支持几个人同时在线沟通(家庭支持网络)

  • 11pro美版是双卡双待吗(11pro美版是不是单卡)

    11pro美版是双卡双待吗(11pro美版是不是单卡)

  • 如何御载下载过的应用(怎么下载下过的应用)

    如何御载下载过的应用(怎么下载下过的应用)

  • 无法使用苹果id更新软件(无法使用苹果图书商店)

    无法使用苹果id更新软件(无法使用苹果图书商店)

  • 网线100兆是什么意思(网线100兆是什么概念)

    网线100兆是什么意思(网线100兆是什么概念)

  • iphone11pro max多少厘米(iphone11promax重量)

    iphone11pro max多少厘米(iphone11promax重量)

  • 华为手机怎么调24小时制(华为手机怎么调下面的三个按键)

    华为手机怎么调24小时制(华为手机怎么调下面的三个按键)

  • 苹果x发热严重怎么办(苹果x发热严重怎么回事)

    苹果x发热严重怎么办(苹果x发热严重怎么回事)

  • 手机千牛怎么激活店铺(手机千牛激活店铺步骤)

    手机千牛怎么激活店铺(手机千牛激活店铺步骤)

  • 华为Nova 5?Pro怎么截屏(华为nova5pro怎么把联系人导入卡里)

    华为Nova 5?Pro怎么截屏(华为nova5pro怎么把联系人导入卡里)

  • p30pro能支持5g吗(p30pro可以5g吗)

    p30pro能支持5g吗(p30pro可以5g吗)

  • qq一键恢复好友(qq一键恢复好友软件)

    qq一键恢复好友(qq一键恢复好友软件)

  • vivoz3有屏幕指纹吗(vivoz3屏幕指纹版)

    vivoz3有屏幕指纹吗(vivoz3屏幕指纹版)

  • Vue动态组件 component :is的使用(vue动态组件component原理)

    Vue动态组件 component :is的使用(vue动态组件component原理)

  • python字符串的多行输出(python字符串多行)

    python字符串的多行输出(python字符串多行)

  • 活久见!郭敬明道歉了!于正也道歉了!道歉的英文就是SORRY吗?(g郭敬明)

    活久见!郭敬明道歉了!于正也道歉了!道歉的英文就是SORRY吗?(g郭敬明)

  • 织梦dedecms做的网站首页标题篡改跳转赌博网站解决方案(织梦使用教程)

    织梦dedecms做的网站首页标题篡改跳转赌博网站解决方案(织梦使用教程)

  • 一般纳税人每个月需要报哪些税
  • 小规模纳税人不开票需要纳税吗
  • 股权转让产生的印花税
  • 母公司出售子公司给另一家子公司
  • 交了进口增值税还要交增值税吗
  • 个人所得税定期定额起征点
  • 贷款利息怎么算的
  • 一次性计提后的固定资产残值
  • 资产负债表上的资产是原值还是净值
  • 收客户款现金折让发票怎么处理
  • 临时营业执照有效期多久
  • 超市预付卡销售开票管理规定最新
  • 公司代收生育津贴怎么做账
  • 增值税抵扣进项税额交税账务处理
  • 税务需要申报吗
  • 陈列费发票属于什么科目
  • 稳岗补贴会计怎么做账
  • 什么是遗产税什么是税
  • 定期定额个体工商户个人所得税
  • 企业没有进项票只有成本票
  • 已认证发票退货怎么办
  • 公司章程出资时间怎么填写
  • 专票有电子发票有抵扣联吗
  • 没有发票的固定资产可以折旧吗
  • 没有银行回单可以用付款凭证
  • 苹果电脑重装系统无法连接服务器
  • 广告制作包括印花吗
  • php常用的技术栈
  • PACKAGER.EXE - PACKAGER是什么进程 有什么用
  • macos big sur使用技巧
  • 电商平台第三方服务
  • 苹果手机屏幕旋转怎么设置关闭
  • 当月认证了发票但没有进行增值税申报
  • 虎刺梅怎么养殖视频
  • 混合成本的分解方法很多,通常有
  • ios.开发
  • vue 查询
  • 流动资产损失
  • 材料成本差异属于流动资产吗
  • 社保缴费基数差1000一般差多少?
  • 2023年重庆邮电大学研究生分数线
  • 微信转账怎么处理退回去
  • 外地预交的企业所得税如何在季度企业所得税申报
  • 判别是否属于劳务报酬
  • 免抵退税额怎么计算城建税
  • 总公司接活让分公司去做可以吗
  • 帝国cms批量excel导入文章
  • vue使用高德地图闪白屏
  • 国地税合并后工资仍然不一致
  • 支付给临时工的费用
  • 三代手续费支付申请表怎么填
  • 税控盘 金税盘
  • 资产负债表和利润表的认定
  • SQL Server 2008 R2 超详细安装图文教程
  • 会计利润属于什么会计科目
  • 计提税金如何做凭证
  • 计入其他综合收益的有哪些
  • 公司购买垃圾箱会计分录
  • 销售折扣与折让在财务报表哪里
  • 去年亏损今年盈利同比怎么算
  • 国有资产划转实施方案
  • 上个月结转的流量下个月能用吗
  • 进项税额抵扣是按税率分开抵扣吗
  • 年终结账账务处理
  • MySQL数据库备份
  • 华硕主板如何刷系统
  • linux中less和more
  • ubuntu命令联网
  • win8系统简介
  • windows7报错
  • win7第三方更新
  • win7纯净版和正版区别
  • win8个性化外观恢复默认设置
  • 如何解决windows不是正版的问题
  • unity 读取xml文件
  • Unity3D游戏开发标准教程
  • linux用yum
  • js cookie存取
  • 广州车辆购置税官网
  • 上海市办居住证流程
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设