前端使用阿里iconfont引入字体图标

打开阿里iconfont，将所要下载的图标依次添加至购物车，然后点击右上角购物车，点击添加至项目。

然后，点击Font-class，下载至本地

下载完毕，解压以后，能看到有这么多的文件。win系统的可能会分文件夹

然后挑出.css、eot、svg、ttf、woff五个文件单独打包到一个文件夹，可以命名为fonts

把打包好的fonts文件夹放在我们项目的根目录下

接下来，在CSS样式中全局声明字体：简单理解把这些字体文件通过css引入到我们页面中。

在fonts文件夹里，有一个iconfont.css

找到里面的@font-face和.iconfont的两段代码，进行复制粘贴。

另外一种方法就是，外部导入，就是不用粘贴了，直接link导入（推荐外部导入）

<link rel="stylesheet" href="fonts/iconfont.css">

最后，就是在HTML中使用字体图标了.打开下载包里的demo_index.html

比如，我要使用这个下拉的字体图标

它的Unicode为 &#xe6b9；

设置一个div盒子，伪元素选择器中插入字体图标

<body><div></div>
</body>

        div {width: 200px;height: 35px;border: 1px solid red;}div::after {font-family: 'iconfont';content: '\e6b9';}

这里要注意：

要将字体图标的编码里的’&#x‘改为‘\’,同时去掉尾部的‘；’

同时，我给它设置一些样式和定位

        div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;font-family: 'iconfont';content: '\e6b9';color: red;font-size: 18px;}

这样就导入成功了

前端使用阿里iconfont引入字体图标相关推荐

vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇一.登入阿里字体图标库选择图标加入购物车下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件推荐 ...
自学前端第二十五:web字体图标使用
web字体图标:本质是字体,伪元素联用的出现一个白色框即字体失效的检查: ①路径那里是不是fonts文件夹的第一子路径就是全部的文件. ②/+unicode编码和转义编码有没有弄棍 (一个给c ...
引入字体图标的三种方式
@引入字体图标的三种方式TOC Unicode引用 fontclass引用 symbol引用--此种引用方式支持多色图标字体包: 1.icomoon字库https://icomoon.io/ 2.阿 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
uniapp引入字体图标库
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹,将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图 ...
阿里巴巴引入字体图标的第二种方法：
阿里巴巴引入字体图标的第二种方法: 第一步:拷贝项目下面生成的fontclass代码: 首先将所选购的图标添加至项目(没有项目可新建项目),如图: 要点击查看在线链接才能生成代码点击复制代码在新建标 ...
使用icomoon引入字体图标及扩充字体图标的方法
何为字体图标? 在说字体图标之前,我们先说一下图片,图片可以让我们的界面更加美丽,但是图片也是有缺点的,比如图片会增加总文件的大小,还会增加额外的HTTP请求,这都会降低网页的性能的.更重要的是图片不 ...
【iconfont】字体图标
[iconfont]字体图标使用  <link rel="s ...
微信小程序、uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用
微信小程序.uni-app使用iconfont-tools将iconfont彩色字体图标组件化并使用安装iconfont-tools npm i -g iconfont-tools 全局安装工具下 ...

前端使用阿里iconfont引入字体图标

前端使用阿里iconfont引入字体图标相关推荐

最新文章

热门文章