广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >html5中的字体图标是指什么意思
  • 234
分享到

html5中的字体图标是指什么意思

html5 2022-10-19 15:10:49 234人浏览 安东尼
摘要

这篇文章主要讲解了“HTML5中的字体图标是指什么意思”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5中的字体图标是指什么意思”吧!

这篇文章主要讲解了“HTML5中的字体图标是指什么意思”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5中的字体图标是指什么意思”吧!

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

html5中的字体图标是指什么意思

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

什么是字体图标?

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

html5中的字体图标是指什么意思

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

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

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

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

使用字体图标的优劣势

1、优势

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

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

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

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

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

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

2、劣势

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

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

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

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

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

获取字体图标有两种方式

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

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

如何使用字体图标?

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

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

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

html5中的字体图标是指什么意思

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

html5中的字体图标是指什么意思

添加到库:

html5中的字体图标是指什么意思

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

html5中的字体图标是指什么意思

(5)点击添加到项目

html5中的字体图标是指什么意思

html5中的字体图标是指什么意思

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

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

html5中的字体图标是指什么意思

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

html5中的字体图标是指什么意思

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

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

html5中的字体图标是指什么意思

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

html5中的字体图标是指什么意思

html5中的字体图标是指什么意思

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

html5中的字体图标是指什么意思

感谢各位的阅读,以上就是“html5中的字体图标是指什么意思”的内容了,经过本文的学习后,相信大家对html5中的字体图标是指什么意思这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: html5中的字体图标是指什么意思

本文链接: https://www.lsjlt.com/news/88167.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html5中的字体图标是指什么意思
    这篇文章主要讲解了“html5中的字体图标是指什么意思”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5中的字体图标是指什么意思”吧! ...
    99+
    2022-10-19
    html5
  • html5中rb标签指的是什么意思
    这篇文章主要介绍“html5中rb标签指的是什么意思”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html5中rb标签指的是什么意思”文章能帮助大家解决问题。 ...
    99+
    2022-10-19
    html5 rb
  • html5指的是什么意思
    这篇文章给大家分享的是有关html5指的是什么意思的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。   html5是指第5代HTML,也指用H5语言制作的一切数字产品,所谓HTM...
    99+
    2022-10-19
    html5
  • html5中table指的是什么意思
    小编给大家分享一下html5中table指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在html中,table是表格,语法格式为“<table...
    99+
    2023-06-15
  • html5中page指的是什么意思
    这篇“html5中page指的是什么意思”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ht...
    99+
    2022-10-19
    html5 page
  • html5中rem指的是什么意思
    这篇文章主要介绍了html5中rem指的是什么意思,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 在html5中...
    99+
    2022-10-19
    html rem
  • HTML5中thead指的是什么意思
    这篇“HTML5中thead指的是什么意思”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“H...
    99+
    2022-10-19
    html5 thead
  • HTML5中nav指的是什么意思
    这篇文章主要介绍HTML5中nav指的是什么意思,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 在HTML5中,nav全称“navigation”,中文意...
    99+
    2022-10-19
    html5 nav
  • html5中p指的是什么意思
    这篇文章主要为大家展示了“html5中p指的是什么意思”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5中p指的是什么意思”这篇文章吧。 ...
    99+
    2022-10-19
    html
  • html5中body指的是什么意思
    这篇文章主要为大家展示了“html5中body指的是什么意思”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“html5中body指的是什么意思”这篇文章吧。 ...
    99+
    2022-10-19
    html5 body
  • html5中onclick指的是什么意思
    这篇文章主要介绍html5中onclick指的是什么意思,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!html5中onclick的意思是“单击”,onclick属性是鼠标事件的一种,...
    99+
    2022-10-19
    html onclick
  • HTML5中header指的是什么意思
    小编给大家分享一下HTML5中header指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
    html5 header
  • html5中font指的是什么意思
    小编给大家分享一下html5中font指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
    html5 font
  • html5中height指的是什么意思
    小编给大家分享一下html5中height指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
    html height
  • html5中ul指的是什么意思
    这篇文章将为大家详细讲解有关html5中ul指的是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在html5中,ul全称“unord...
    99+
    2022-10-19
    html5 ul
  • html5中section指的是什么意思
    小编给大家分享一下html5中section指的是什么意思,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
    html5 section
  • html5中overflow指的是什么意思
    这篇文章主要介绍了html5中overflow指的是什么意思,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在html5中,overflow的意思是溢出,该属性规定如何处理不符...
    99+
    2023-06-15
  • html5的5是指什么意思
    小编给大家分享一下html5的5是指什么意思,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!html5中的5是指第五版;html5是HTML的第5版;在这一版本中,增加了支持Web应用开发者的许多新特性,以及更符合开发者使用...
    99+
    2023-06-06
  • html中标签指的是什么意思
    这篇文章主要介绍了html中标签指的是什么意思,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。HTML标记标签通常被称为HTML标签,是由尖括号包围的关键词,比如“”;HTML...
    99+
    2023-06-15
  • html5中父标签是什么意思
    这篇文章将为大家详细讲解有关html5中父标签是什么意思,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 在html5中,当一个标签被另一个标签...
    99+
    2022-10-19
    html
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作