CSS中图标字体的引用及3种使用方式—

图标字体（iconfont）

-在网页中经常需要使用一些图标，可以通过图片来引入图标，但图片本身比较大，也不灵活

-所以使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入

-这样我们就可以通过使用字体的形式来使用图标

图标库有很多，目前国内使用比较多的就是阿里巴巴图标矢量库，网址：https://www.iconfont.cn/

以后学习框架的时候，会知道框架里面也有很多的图标，可以直接使用，不过没有阿里巴巴图标多，好看。

下面介绍阿里巴巴图标库的使用

第一步：注册阿里巴巴图标库的账号，搜索自己想要的图标

第二步，将选中的图标加入到购物车内

第三步：去购物车里，将图标放入到你正在做的项目里

第四步：在项目中，可以选择下载本地文件或者复制在线网址，下面介绍怎么使用图标

代码演示图标三种使用方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- 引入线下版本  下载下来，如果没有网也是可以生效的 --><link rel="stylesheet" href="./阿里字体库/iconfont.css" /><!-- 引入线上版本  跟上面的线下版本引入一个就可以了--><!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_3284033_acdfm5jydfd.css" /> --><style>p::before {content: "\e60f";font-family: "iconfont";}</style></head><body><!-- 第一种方式 --><span class="iconfont"></span><span class="iconfont"></span><!-- 第二种方式 --><i class="iconfont icon-jishuzhuanyi"></i><i class="iconfont icon-zhijiao-copy-copy3"></i><!--第三种方式 --><p>一朵花</p></body>
</html>

CSS中图标字体的引用及3种使用方式——阿里巴巴矢量库相关推荐

精灵图在现代前端中到底有用没，css中显示和隐藏竟有两种不同方式
css基础篇(第七篇) 回顾在上一讲中我们基本上学习了css中定位的几种方式,包括定位在实际工作中常用的口诀等,除此之外还学习了margin:0 auto 水平居中的效果.未来常用的z-index等 ...
css 字体图标更改颜色_在CSS中更改字体
css 字体图标更改颜色 CSS字体属性 (CSS font properties ) Font properties in CSS is used to define the font family ...
CSS中对字体进行设置
在对字体设置的时候,我们可以设置字体的字体系列,字体的样式,字体的大小,字体加粗,和字体转换.下面我们来一一的对字体的这些设置进行分析. 字体系列: 在CSS中有两种类型的字体系列: 通用的字体系列: ...
css引入本地字体文件,关于css中引入字体文件
关于css中引入字体文件 css样式代码: @font-face { font-family: Lovelo-Black;//定义font的名字 src: url(font/Lovelo Black. ...
html怎么设置字体于字体的间隔,如何在css中设置字体间隔
如何在css中设置字体间隔发布时间:2021-05-15 15:39:05 来源:亿速云阅读:81 作者:Leah 如何在css中设置字体间隔?针对这个问题,这篇文章详细介绍了相对应的分析和解答, ...
微信开发工具及Hbuilder中引用阿里巴巴矢量库（步骤一样）
第一步:创建一个阿里巴巴矢量库项目,将图标加入项目中,并生成一个在线的css文件第二步:在微信开发者工具中新建一个.wxss文件,把第一步中的复制好的代码粘贴到这个文件中,如果将来有新的图标放置项目 ...
html文本最小长度,CSS中处理不同长度文本的几种小技巧
CSS中处理不同长度文本的几种小技巧 [推荐教程:CSS视频教程 ] 当我们使用 CSS 构建布局时,考虑长短文本内容很重要,如果能清楚地知道当文本长度变化时需要怎么处理,可以避免很多不必要的问题. ...
全网最细，实测可用！Iconfont阿里巴巴矢量库的使用，将icon图标引入前端页面
Iconfont阿里巴巴矢量库的使用阿里巴巴矢量库使用步骤: (因为阿里矢量图库类似一个商场一样的设计,需要我们登录,把想要的图标放进我们的购物车中,步骤可能有些繁琐) 先看一下gif图吧,如果看 ...
小程序--微信小程序使用阿里巴巴矢量库图标
小程序–微信小程序使用阿里巴巴矢量库图标 2020年4月20日阿里巴巴矢量库 1.导图 1.1下载图标项目注:项目默认引用名是iconfont,我这里改成了font,所以我引用的第一个class是 ...

CSS中图标字体的引用及3种使用方式——阿里巴巴矢量库

CSS中图标字体的引用及3种使用方式——阿里巴巴矢量库相关推荐

最新文章

热门文章