Web前端学习—如何在网页中插入字体图标详细步骤 - 蓝蓝设计_UI设计公司

帝皇彩票官网

Web前端学习—如何在网页中插入字体图标详细步骤

2020-2-2 释然 前端及开发文章及欣赏

一、什么是字体图标
字体图标:简单的说,就是一种特殊的字体,通过这种字体,显示给用户的就像一个个图片一样,但它的本质是文字。目前在移动端应用比较广泛!



二、字体图标的使用步骤
这里以阿里巴巴矢量图标库为例!!!

sep1:
百度搜索iconfont,找到阿里巴巴矢量图标库官网

网址在这里https://www.iconfont.cn/
进去之后注册或登录,共有3种登录方式,在这里我使用新浪微博账号登录


好了,登录之后我们就可以在里面选择自己想要的字体图标啦!!!那么,如何选择下载并应用到自己的项目中呢??别着急,跟着我走!

sep2:下载字体图标字体库
在这里我们可以根据自己的需求输入相应的关键字进行搜索(中英文都可以)

鼠标放上去,然后就可以把自己喜欢的宝贝加入购物车啦!

网购的赶脚有木有,
我知道,看到这里大家就该有疑问了,
还要花钱买吗?
放心!
答案是:不需要!

我们选的东西都在购物车里啦!

打开购物车,就能看到你选的图标了!!
接下来你要做的是把它们下载到本地。

由于要在网页中使用
在这里我们选择 下载代码

下载后将压缩包解压,为了方便后续使用我们改一下文件夹名称,在这里我改为 icon (注意:在HTML中导入路径时,记得带上你所改的文件夹名称)

打开之后你会发现里面有不同类型的文件(建议都不要删除)

打开后缀名为.html的这个文件(可以更直观地查看自己下载的字体图标)



step3:在项目中引用字体图标
不要走开,重点来了!!!
官方提供了三种引用方法(下面对应的都有步骤)


Unicode 引用
Unicode 是字体在网页端最原始的应用方式,特点是:
兼容性最好,支持 IE6+,及所有现代浏览器。
支持按字体的方式去动态调整图标大小,颜色等等。
但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
Unicode 使用步骤如下
第一步:拷贝项目下面生成的 @font-face
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }
第二步:定义使用 iconfont 的样式
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont">&#x33;</span>

font-class 引用
font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。
与 Unicode 使用方式相比,具有如下特点:
兼容性良好,支持 IE8+,及所有现代浏览器。
相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。
不过因为本质上还是使用的字体,所以多色图标还是不支持的。
使用步骤如下:
第一步:引入项目下面生成的 fontclass 代码:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-xxx"></span>

symbol 引用
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:
支持多色图标了,不再受单色限制。
通过一些技巧,支持像字体那样,通过 font-size, color 来调整样式。
兼容性较差,支持 IE9+,及现代浏览器。
浏览器渲染 SVG 的性能一般,还不如 png。
使用步骤如下:
第一步:引入项目下面生成的 symbol 代码:
<script src="./iconfont.js"></script>
第二步:加入通用 CSS 代码(引入一次就行):
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>

下面,我就跟大家详细说说 font-class 引用的引用方式:

打开编辑器(在这里我使用的是 VS Code编辑器),新建一个项目文件夹(demo)


将解压后的字体图标文件夹(icon)直接放到demo目录下


在demo文件夹下面新建一个html文件 demo.html

导入icon文件夹里面的外部样式表
<link rel="stylesheet" href="./icon/iconfont.css">

iconfont.css 里面就是我们下载的字体图标的所有css样式了,我们打开看看吧!
你会发现里面有一个 iconfont类名(这里划重点!后面要用),它是所有字体图标的公用样式。


这时我们就可以在页面中使用这些字体图标啦!上面我们只是导入了整个css样式表,现在我们要针对性地把某个图标引用到html页面中,并在网页中显示出来。
下面 我们就开始写页面的主体部分吧!

<p> 我有一个梦想:能够拥有一套 <span class="iconfont icon-home"></span> </p>
这里的span标签里面放的就是要用的某个字体图标了,你会发现它用了两个class类名。
第一个是iconfont,也就是我前面划的重点(到这里不明白的话,可以再回头看看)
第二个是icon-home,这个类名从何而来呢?
来,继续往下看,再次打开icon文件夹下的

话不多说,直接看图

是不是对应上啦!简单地说就是你要用那个图标就添加它的class类名。

到这里,恭喜你已经学会了如何在网页中插入字体图标啦!!!
那么,赶快运行一下看看效果吧!

到这里是不是还满足不了你的需求,会有这样的疑问:如果是这样的效果,跟一张图片有什么区别呢???
当然不是啦!
之所以叫做字体图标,顾名思义,它在网页中就是一种字体的存在,不过它比普通字体长得好看些有木有!
我们可以像更改文字样式一样去更改它的样式,比如说 大小、颜色、阴影…

Symbol 引用方式还可以实现下面原图标的彩色效果哦!可以自己照着官方提供的步骤试试看


下面附上Font class引用方法的 源代码 供参考
前面的步骤一定要看!!!
如果前期工作没做的话,直接用我的源代码是实现不了的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <style>
        .iconfont{
            font-size: 200px;
            color: palevioletred;
            text-shadow: 18px 17px 17px gray;
        }
    </style>
</head>
<body>
    <p>
        我有一个梦想:能够拥有一套
        <span class="iconfont icon-home"></span>
    </p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
花费了很长时间整理出来的。
很简单是不是!!!
看到这里还不会的话,建议重新再看一遍!

其中有错误的话,还请指出,我会虚心接受并改正!!!
————————————————
版权声明:本文为CSDN博主「Humy.」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42678796/article/details/104569773

标签: Web前端学习—如何在网页中插入字体图标详细步骤

Powered by sitemap
大象彩票登入 博发彩票开奖 博发彩票APP下载 帝皇彩票平台 福建快3走势 江西快3 吉利彩票导航 大象彩票APP 博发彩票APP下载 甘肃快3