06.font&background------03.图标字体（iconfont库）

最新推荐文章于 2022-09-06 14:43:30 发布
最新推荐文章于 2022-09-06 14:43:30 发布
阅读量323 收藏
点赞数
文章标签： css css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52551539/article/details/121081279
版权

iconfont库是国内的图标字体库，在测试使用时可以随便使用，但在为公司商用时，要先联系作者版权问题，他没有相应的文档，使用时需要哪个就得把哪个下载到本地，具体使用步骤如下：

1.将需要的图标字体添加到购物车，然后再将其添加到项目，在下载到本地

2.将下载到本地的文件添加到自己的项目中

3.将iconfont.css添加到网页中，添加完以后可以使用与font awesome库一样的方式引入图标字体：

        a.通过伪元素::before和::after

        b. 再标签里面添加图标字体

        c. 通过实体

向北航行五万里
关注
CSS 背景图标（雪碧图、精灵图、iconfont）
Ares5k
04-12 1580
雪碧图（精灵图）、iconfont
【web前端HTML5+CSS3】06CSS--font（字体）&background（背景）
weixin_58214412的博客
02-20 341
目录 1.字体族 2.图标字体简介 3.图标字体其他使用方式 4.阿里字体库 5.行高 6.字体的简写属性 7.文本的水平和垂直对齐 8.文本的其他样式 9.京东顶部导航练习 10.背景（一） 11.背景（二） 12.背景重复练习 13.按钮练习 14.雪碧图 15.线性渐变 16.径向渐变 17.电影卡练习 1.字体族 /* font-face可以将服务器中的字体直接提供给用户去使用 问题.
img/background/iconfont---谁最适合你？
weixin_34090643的博客
06-30 461
前言 第一篇文章，小弟先做一番自我介绍^ω^姓名不说，年龄21岁，湖北武汉一所二本大学2016届本科毕业生，大四前的暑假起对web前端产生兴趣并有半年实习经验。ng、vue、react等等高大上的框架完全不懂，却也靠前端交流群和百度积攒下了一些小小心得。说来写文章也是比较心虚，怕有理解不到位之处还可能祸害别人。可是万一哪位大牛看到之后闲来...
CSS学习笔记--第五天
Android Studio中实现普通、点击、禁用状态下圆角按钮背景颜色的改变
01-27 353
文章目录八、CSS高级技巧1. 精灵图（重点）1.1 为什么需要精灵图1.2 精灵图（sprites）的使用2. 字体图标2.1 字体图标的产生2.2 字体图标的优点2.3 字体图标的下载2.4 字体图标的引入2.5 字体图标的追加2.6 字体图标加载的原理3. CSS 三角3.1 介绍4. CSS 用户界面样式4.1 鼠标样式 cursor4.2 轮廓线 outline4.3 防止拖拽文本域 resize5. vertical-align 属性应用5.1 图片、表单和文字对齐5.2 解决图片底部默认空白缝
iconfont字体库图片查看工具
01-27
开发过程中为了减少android 的app体积，对色调单一的图片可以使用iconfont代替，通过工具查看iconfont的代号，方便在代码中使用，通过工具也可以修改字体库的代号。
iebackground+icon图标兼容
bangxionger9224的博客
07-03 108
<!DOCTYPE > <html> <head> <title>zepto</title> <meta name="name" content="content"> <meta content="text/html; charset=utf-8" http-equiv="Conten...
详解vue使用vue-layer-mobile组件实现toast，loading效果
10-18
- 对于弹窗中图标字体的定义，需要正确设置`font-family`，以确保图标能正确显示。 - 对于oppo和vivo的webview中的兼容性问题，如果遇到无法关闭加载条的问题，可以尝试将关闭方法放在方法的最后。 - 自定义样式...
-1. HTML&CSS 基础总结
Holsen_bakery's Learning notes Blog
03-05 916
HTML&CSS 基础知识笔记总结
uni-app扫雷先锋之nvue的文字图标，封装自己的图标按钮
weixin_43139949的博客
11-25 840
uni-app扫雷先锋实际需求第一次遇坑第二次尝试-遇坑第三次尝试-图标出现了封装字体图标 上次还说nvue以后讨论今天就来了，nvue呀怎么说呢，官方的说法是性能好如何如何的，但是有些时候呢却逼着咱开发者不得不用，因为有些功能呢只有nvue有。。。比如地图组件的一大堆功能就只有nvue才能用，有些小伙伴说了引plus呀，可是引plus的话，小程序和app之间就会产生很多很多区别。行了废话就不多说了。。。 实际需求 字体图标这个东西相信搞开发的小伙伴们都不会陌生，用到它的地方特别的多，那么在nvue中它有多
【uni-app从入门到实战】项目创建、基本配置、首页
Errol's Blog
09-06 4681
【uni-app从入门到实战】
详解CSS中iconfont的使用
12-13
初识iconfont 就算我们一开始不懂这个英文不懂是干嘛的，对于iconfont，英文从后往前读应该叫做：字体图标。这里面已经包含两个概念，首先必须是字体，第二，就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性，所以这个iconfont必须是以文字嵌入到样式中，所以想到的必须是font；既然是图标那么它就必须有一个路径来引入进来，首先我们一开始想到的img这个标签，既然又是文字又是图标，我们能想到的就只有这个@font-facecss3属性。 还有这个iconfont后来词语，并不是一开始就出现的，网页制作者或者学者想要叫起来更爽口所赋予的一个表现层的东西。
15.①精灵图(background-position:-x -y；)②字体图标iconfont的下载和使用、新字体图标追加③禁止文本或字体图标被选中user-select: none④三角小图标制作
lazylYYY的博客
07-18 175
1.获取小图标的宽，高，x,y轴信息，写负数。 2.background-position:-x -y;
css基础-5-背景、精灵图和字体图标
Neptuneyut的博客
05-21 615
文章目录背景 背景 背景常用来设置一些小的logo、精灵图或者一些超大的图片背景，背景的优点在于可以通过设置位置来实现精确定位 属性 作用 值 background-color 背景颜色 默认transparent background-image 背景图片 url(背景图片) background-size 大小 width,height，写一个保持比例 background-repeat 重复 repeat,no-repeat,repeat-x,repeat-y bac
iconfont使用简易教程 svg
jack_rose_me的博客
12-11 1098
因为自己的项目中需要使用图标，而本人不擅长前端。因此了解到阿里的iconfont矢量图标是一个不错的图标库。下文介绍最简易，通用的使用图标方式以便参考。 一、 寻找适用的图标 官方网址：http://www.iconfont.cn/找到需要的icon 以为例，添加入库。 二、 生成代码： 点击右上角购物车图标 点击下载代码，得到zip包，解压即可获得需要的文件。 ...
Html 使用svg图标、iconfont的使用方法
林中明月间丶
02-05 3548
https://zhuanlan.zhihu.com/p/54088196 SVG 代码也可以写在一个以.svg结尾的文件中，然后用<img>、<object>、<embed>、<iframe>等标签插入网页。 <img src="search.svg"> <object id="object" data="search.svg" type="image/svg+xml"></object> <embed id=
iconfont阿里巴巴矢量图标库的使用
pp
10-27 430
iconfont阿里巴巴矢量图标库的使用 iconfont阿里巴巴矢量图标库地址 找到需要的图标 加入购物车 加入项目 下载到本地 复制一下文件到相应目录 main.js 引入css：import ‘./common/style/font/iconfont.css’ //相对路径 点击获取代码，在父级加iconfont类名即可 Iview图标点击复制代码即可 有用文件： 应用：...
阿里iconfont使用方法与案例
qq_45409543的博客
09-17 377
静态页面练习，结尾有成果展示 index.html <!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="styl
font&background
Major_S的博客
02-13 498
font&background
<i class=“el-icon-user-solid”></i>改为物流管理图标
最新发布
09-21
<i class="el-icon-user-solid" style="transform: rotate(0deg); background-color: transparent; color: #666; margin-right: 5px;" data-v-79154f2d="">可以将这个用户图标替换为物流管理相关的矢量图或字体图标，例如使用物流车、快递箱、货物搬运等图案。常见的库如Font Awesome就提供了各种物流相关的图标，如`fas fa-truck` 或 `fas fa-box`。如果你需要图形化的图标，可以在图标库如Iconfont、阿里巴巴矢量图库或Material Design Icons中搜索物流或物流管理的图标并应用到你的设计中。 如果要在HTML中直接使用，可能需要引用相应的CSS库，并通过class选择器设置图标，例如： ```html <i class="icon icon-logo-logistics"></i> ``` 然后在CSS中定义`.icon-logo-logistics`的图标路径： ```css .icon-logo-logistics { font-family: 'your-font-awesome-library'; content: "\f0da"; /* 这里是物流车的FA图标代码 */ } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值