HTML 字体图标的引入

字体图标：简单的说就是1种特殊的字体，通过这种字体，显示给用户的就像一个个图片一样。可以通过css样式改变文字和颜色，使用非常方便。

字体图标引入中，我经常使用

iconfont-阿里巴巴矢量图标库

在这里讲解一下阿里巴巴矢量图标库的使用方法

首先选择自己喜欢的图标加入购物车

点击购物车——添加至项目（如果没有项目可以在旁边点击+号新建项目）——点击确定之后会在项目中看到自己需要的图标

之后点击下载到本地（下载的是zip文件）

将文件进行解压

文件里面现在是这个样子的

我直接将解压活动文件放入了项目文件夹

在html 中直接引入iconfont.css 文件，就可以在页面生成字体图标 —效果图如下

在iconfonts.css 文件下注意字体图标的路径

如果字体图标引入不成功可以尝试更改一下路径 ***

HTML 字体图标的引入相关推荐

从零开始学前端：字体图标的引入 --- 今天你学习了吗？（CSS：Day18）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:定位 - 今天你学习了吗?(CSS:Day17) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
字体图标的引入和使用-svg是个好东西
第一步,拥有svg格式的图片途径一:ui给你途径二:自己去阿里巴巴下载网址:https://www.iconfont.cn/home/index?spm=a313x.7781069.199891 ...
字体图标的引入方式(阿里巴巴字体库的使用)
iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载.在线存储.格式转换等功能.阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具http ...
icomoon字体图标的引入
1.在网站(http://icomoon.io)中下载字体进入官网点击进入后即可选择字体(直接点击选择),加载得稍微有点慢,耐心等待. 若没有想要的,可直接下拉到网页最后点击在library ...
uniapp引入字体图标库
步骤 1.首先在项目文件夹的src目录下新建一个styles文件夹,将字体图标文件放到其中iconfont.wxss 2.在App.vue中的标签中全局引入字体图标文件 ``` 3.这样就完成了字体图 ...
web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
css技术点二：字体图标（阿里巴巴字体图标使用）
css技术点二:字体图标(阿里巴巴字体图标使用) 一.什么是字体图标二.字体图标的好处三.字体图标用法四.字体图标格式介绍一.什么是字体图标字体图标可以为前端工程师提供一种方便高效的图标使用 ...
CSS精灵图及字体图标
一.精灵图(重点) 1.1为什么需要精灵图网页中往往会有很多的小背景图像作为修饰,当频繁向服务器发送请求时,服务器压力过大,降低加载速度. 使用精灵图的目的:减少服务器的请求次数,提高加载速度例子 ...

HTML 字体图标的引入

HTML 字体图标的引入相关推荐

最新文章

热门文章