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

  • 百度网盘联运版是什么意思(百度网盘联运版下载)

    百度网盘联运版是什么意思(百度网盘联运版下载)

  • 魅族应用商店网络异常(魅族应用商店网页版下的软件怎么安装)

    魅族应用商店网络异常(魅族应用商店网页版下的软件怎么安装)

  • 手机qq音乐怎么显示歌词(手机qq音乐怎么控制电脑的qq音乐)

    手机qq音乐怎么显示歌词(手机qq音乐怎么控制电脑的qq音乐)

  • 排污泵浮球三根线怎么接(排污泵浮球三根线接法)

    排污泵浮球三根线怎么接(排污泵浮球三根线接法)

  • Word字体缩放在哪里设置(word中字体缩放)

    Word字体缩放在哪里设置(word中字体缩放)

  • 手机防窥屏原理(手机防窥屏原理是光线沿直线传播吗)

    手机防窥屏原理(手机防窥屏原理是光线沿直线传播吗)

  • 笔记本电脑健盘按健按不了(笔记本电脑键盘灯不亮怎么回事)

    笔记本电脑健盘按健按不了(笔记本电脑键盘灯不亮怎么回事)

  • 快手小店备案编号是什么(快手小店的备案编号是什么意思)

    快手小店备案编号是什么(快手小店的备案编号是什么意思)

  • 红米7a和红米8a有什么区别(红米7a和红米8a有什么区别?)

    红米7a和红米8a有什么区别(红米7a和红米8a有什么区别?)

  • 九代i5有哪些型号(9代i5处于什么水平)

    九代i5有哪些型号(9代i5处于什么水平)

  • 酷喵vip能登录几台电视(酷喵vip能登录几个电视)

    酷喵vip能登录几台电视(酷喵vip能登录几个电视)

  • dvi是什么设备上的接口(dvi-d什么意思)

    dvi是什么设备上的接口(dvi-d什么意思)

  • 手机自录视频功能在哪(手机自录视频功能在哪华为)

    手机自录视频功能在哪(手机自录视频功能在哪华为)

  • 息屏状态怎么听视频(息屏状态怎么听声音)

    息屏状态怎么听视频(息屏状态怎么听声音)

  • ps如何去除图片背景(ps如何去除图片上的水印不伤背景)

    ps如何去除图片背景(ps如何去除图片上的水印不伤背景)

  • 苹果watch能录音吗(苹果watch录音如何导出)

    苹果watch能录音吗(苹果watch录音如何导出)

  • 手机为什么应用无法正常启动(手机为什么应用打不开)

    手机为什么应用无法正常启动(手机为什么应用打不开)

  • 华为手机找不到返回键(华为手机找不到应用图标)

    华为手机找不到返回键(华为手机找不到应用图标)

  • cad怎么添加中心线(cad2016快速添加中心线)

    cad怎么添加中心线(cad2016快速添加中心线)

  • 怎么边打电话边录音(怎么边打电话边发语音)

    怎么边打电话边录音(怎么边打电话边发语音)

  • 全民k歌移除粉丝对方知道吗(全民k歌移除粉丝和拉黑是一样吗)

    全民k歌移除粉丝对方知道吗(全民k歌移除粉丝和拉黑是一样吗)

  • 抖音头饰在哪里(抖音头饰怎么获得)

    抖音头饰在哪里(抖音头饰怎么获得)

  • 苹果手机螺丝滑丝了怎么办(苹果手机螺丝滑丝了怎么取出来图解)

    苹果手机螺丝滑丝了怎么办(苹果手机螺丝滑丝了怎么取出来图解)

  • 忘记了谷歌邮箱的密码怎么办(忘记了谷歌邮箱账号,并且忘了姓名)

    忘记了谷歌邮箱的密码怎么办(忘记了谷歌邮箱账号,并且忘了姓名)

  • 扫描付款码如何设密码(扫码付款的二维码怎么弄)

    扫描付款码如何设密码(扫码付款的二维码怎么弄)

  • 苹果x横屏设置在哪儿(iphonex的横屏设置)

    苹果x横屏设置在哪儿(iphonex的横屏设置)

  • 电话加入黑名单会怎样(电话加入黑名单对方还能打通吗)

    电话加入黑名单会怎样(电话加入黑名单对方还能打通吗)

  • 小规模纳税人购车好处
  • 如何开局增值税发票
  • 材料出入库制度
  • 销售费用包括啥
  • 开现代服务发票有什么要求吗
  • 跟个人租车可以到税务局开发票吗
  • 退回的税款如何做账
  • 核定征收的小规模企业所得税B表收入总额含税吗
  • 工资结算汇总表会计科目
  • 股息红利所得如何缴纳个人所得税
  • 股东捐赠给企业资金保壳
  • 采购运输管理系统
  • 代扣代缴手续费企业所得税
  • 城建税和教育费附加的计税依据是什么
  • 安装预算收入
  • 合同无效后还能主张违约责任吗
  • 注册资本转让税率
  • 外购软件可以加计扣除吗
  • 残疾人保障金人数
  • 免税收入与不征税收入的区别与联系
  • 网易打不开怎么退出游戏
  • 在win7系统中如何让电脑恢复出厂设置方法
  • 孕妇可以喝蜂蜜水吗?
  • 事业单位福利发放时间
  • 工资只发一半
  • 个人所得税如何退税操作步骤
  • 计算机怎么设置长亮
  • vcpkgsrv.exe是什么进程
  • 二级资本债是什么意思
  • 非居民所得税代扣代缴
  • 广告费业务宣传费可以结转吗
  • 运输中合理损耗计入采购成本
  • 基于html的旅游网站设计源代码
  • 京东到家的物流模式
  • 微信小程序在哪里打开
  • 以前多计提的工资怎么办
  • mysql binlog是什么
  • 什么是技术服务工程师
  • 职工教育教育经费
  • 未缴足注册资本
  • php判断是否为整数
  • mongodb导出数据库数据文件
  • 季度预缴纳税申报表利润总额
  • 建筑安装工人住宿费会计分录
  • 原材料暂估入库分录
  • MySQL默认字符集修改
  • 购入商品再卖出
  • 贷款利息收入要交增值税吗
  • 有借款合同还要写借条吗
  • 员工请假扣款怎么做分录
  • 佣金是买卖股票都收吗
  • 应收票据的分录怎么做
  • 冲回去年收入会计分录
  • 生产中产生的废油漆桶等危险废物应当作为什么贮存
  • 组织员工旅游的租宿费的税额是什么
  • 收银员长款短款什么意思
  • 外经证的办理流程
  • 没有申报未开票收入怎么办
  • 固定资产清理和持有待售资产
  • 分页存储过程的实现
  • win7下mysql6.x出现中文乱码的完美解决方法
  • mysql的慢查询日志怎么查看
  • mac硬盘挂载软件
  • putty连接ubuntu
  • mac 系统查看
  • win7升级win10收费吗
  • centos7打开命令行
  • win10更新中重启会怎么样
  • 如何设置edittext控件中的文字
  • css全局声明
  • c调用nodejs
  • 初识年岁尚温柔 小说 免费
  • js动态生成的id怎样获取
  • jQuery 实现ajax传入参数含有特殊字符的方法总结
  • package.json里面的配置
  • 使用image控件显示图片
  • listview添加数据
  • 电子湖北税务局
  • 领导班子和领导干部年度考核
  • 税法 农产品增值税题目及答案
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设