• 技术文章 >web前端 >前端问答

    html5中什么是字体图标

    青灯夜游青灯夜游2022-01-11 14:43:52原创91

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

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

    什么是字体图标?

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

    1.jpg

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

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

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

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

    使用字体图标的优劣势

    1、优势

    2、劣势

    获取字体图标有两种方式

    如何使用字体图标?

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

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

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

    1.png

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

    2.png

    添加到库:

    3.png

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

    4.png

    (5)点击添加到项目

    5.png

    6.png

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

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

    7.png

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

    8.png

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

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

    9.png

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

    10.png

    11.png

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

    12.png

    相关推荐:《html视频教程

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:html5 字体图标
    上一篇:html5文本控制标记有哪些 下一篇:javascript怎么隐藏li

    相关文章推荐

    • html5有哪些特殊标签• html5中rb标签的含义是什么• html5定位有哪几种• html5特性包括哪些• 哪个HTML5内建对象用于在画布上绘制• html5的优势体现在哪

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网