站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

html5中什么是字体图标

时间:2022-01-13 [网络编程]作者:fabuyuan 浏览:6 次

html5中,字体图标是在Web项目中使用的图标字体,其本质就是一种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样。字体图标可以像文字一样,随意通过CSS来控制它的大小和颜色,对于建网站来说,非常方便。

html5中什么是字体图标  2

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

什么是字体图标?

字体图标简单的说,就是一种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样。字体图标最大的好处,在于它不会变形和加载速度快。字体图标可以像文字一样,随意通过 CSS来控制它的大小和颜色,对于建网站来说,非常方便。

html5中什么是字体图标  2

字体图标是使用微小图像而不是字母形式的字体。 与字符一样,每个图标字体都是矢量元素,可根据需要进行伸缩,并可以使用CSS样式进行修改。

使用图标字体的主要原因是你可以轻松更改大小,颜色,形状。 图标字体本质上是透明的,因此你可以将它们放在任何颜色或类型的背景上,还可以添加笔触或更改图标的不透明度。

所有的设置操作均可以使用CSS完成,因此你不必为设计中的每个新图标实例创建唯一的图像(这对于保持网站设计和代码的轻量级非常有用)。

图标字体是矢量图像,这意味着它们是可随意进行缩放而不失真的。 与其他字体一样,你可以根据需要将它们设置更大或更小。 仅将图标字体用作艺术元素,甚至在其他文本字段中。

使用字体图标的优劣势

1、优势

  • 只要CSS中存在相应的类,图标就易于缩放;

  • 你可以在互联网上轻松获得既有的大型图标库;

  • 更改图标属性非常容易,无论你使用什么来构建网站的;

  • 将图标添加到网站设计上的任何页面都很容易(只需插入图标名称);

  • 有数千种各种样式的图标可供选择;

  • 如果需要更高的自定义,你甚至可以创建自己的图标字体。

2、劣势

  • 图标是单色或渐变色(在大多数情况下,不过一些可以提供更多自定义选项的服务正在改变这一点);

  • 如果无法加载到图标字体,则没有其他的备用字体供使用;

  • 你可能不需要完整的图标集;

  • 一些浏览器器还不能或不完全支持图标字体;

  • 你可能找不到适合你的需求的资源。

获取字体图标有两种方式

  • 阿里矢量图标网:www.iconfont.cn(推荐)

  • 国外网站:http://icomoon.io

如何使用字体图标?

由于国外的这个网站加载速度慢,在这里我用阿里提供的图标库来进行演示

(1)在浏览器中搜索 iconfont ,找到 阿里巴巴矢量图标库网 ,然后注册登录,如之前有注册过,此步骤跳过;

(2)把鼠标移入到 图标库, 有一个下拉列表,选择网图标库 ;

html5中什么是字体图标  2

(3)点击列表中的第一个 图标库, 打开一个 新页面, 并把自己喜欢的图标添加到库里面;

html5中什么是字体图标  2

添加到库:

html5中什么是字体图标  2

(4)右上角有一个类似购物车,你添加到库里面的字体图标全部在里面;

html5中什么是字体图标  2

(5)点击添加到项目

html5中什么是字体图标  2

html5中什么是字体图标  2

接着网页会自动跳转到对应的项目里了,如图:

下载至本地:(最关键的一步)

html5中什么是字体图标  2

下载下来解压后的文件如下:

html5中什么是字体图标  2

(6)如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加一个类名 并把相对应的代码复杂粘贴到标签上。

打开这个 demo_index.html 只需要复制这串代码即可 如图:

html5中什么是字体图标  2

然后把 iconfont.css 粘贴到 css 文件夹中 这是我的项目文件夹和对应的代码:

html5中什么是字体图标  2

html5中什么是字体图标  2

这是在谷歌浏览器里看到的字体图标(觉得字体太小的话可以通过 font-size 属性来控制的)。

html5中什么是字体图标  2

相关推荐:《html视频教程

以上就是html5中什么是字体图标的详细内容,更多请关注站长家园其它相关文章!

本文标签:  html5字体图标

转载请注明来源:html5中什么是字体图标

本文永久链接地址:https://www.adminjie.com/post/7601.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 一起聊聊MySQL基础之触发器和事件

      一起聊聊MySQL基础之触发器和事件

      本篇文章给大家带来了关于mysql中触发器和事件的相关知识,其中包括触发器使用注意事项、查看和删除事件、事件使用注意事项等等,希望对大家有帮助。触发器我们使用M...

    • 使用jq如何删除css样式

      使用jq如何删除css样式

      删除方法:1、用removeClass()或toggleClass()移除指定CSS类,语法“removeClass("类名")”或“toggleClass("...

    • css3如何让盒子水平居中

      css3如何让盒子水平居中

      css3让盒子水平居中的方法:1、使用margin属性,给盒子元素添加“margin:0auto;”样式即可水平居中;2、利用flex弹性布局来实现水平居中...

    • 如何将css文件设置为utf-8

      如何将css文件设置为utf-8

      在css中,可以利用“@charset”规则来将字符编码设置为“utf-8”,该规则可以指定样式文件中使用的字符编码,语法为“@charset"UTF-8";...

    • css怎么设置按钮中的字大小

      css怎么设置按钮中的字大小

      css设置按钮中字体大小的方法:1、给按钮元素添加class属性并设置属性值;2、使用class选择器选中按钮元素,添加“font-size:数值px;”样式即...

    热门文章