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

最新推荐文章于 2022-06-11 13:47:45 发布
最新推荐文章于 2022-06-11 13:47:45 发布
阅读量286 收藏
点赞数
文章标签： 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. 通过实体

向北航行五万里
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 echarts 的 rich 中使用 iconfont 图标库图标作为 backgroundColor.image 值的方法
码厩
03-07 579
3、 获取图标的描边路径，即 path 的 d 属性；以及 symbol 中的 viewBox 属性（注意：如果没有viewBox，最终可能显示的是空白图标）有时一个项目中，不止使用一个图标库，因此在body下不止一个svg，仍然用上面的方法可能无法获取到对应图标，因此需要将所有svg都获取下来，然后遍历。该脚本执行时，会在 body 下插入一个 svg 标签，标签下包含了图标库中的 svg 图标 path。2、获取 svg 的 dom 节点。注意，iconfont 的 svg 是插入到 body 下的。
CSS 背景图标（雪碧图、精灵图、iconfont）
Ares5k
04-12 1495
雪碧图（精灵图）、iconfont
学习记录596@CSS用svg做背景
教练我想学编程
06-11 2558
展示出来的效果 最开始看到这个代码的时候是懵逼的，其实大概意思是背景图片使用了svg，并且这个svg是用base64加密的，我们用base64解密工具将第三个参数的那串字段解密，发现就是svg 在菜鸟教程中在线编辑器中展示： 如果不用这种方式在背景中使用svg，就用引入svg文件的方式。...
前端学习（2489）：初识vue以及引入vue
歌谣的博客
11-02 586
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta ht...
最简单的SVG图标使用方式
Dreamy_LIN的博客
05-19 6735
简介 Icon Sprite ：CSS精灵或雪碧图，是一种网页图片应用处理方式。原理是，把网页中一些Icon整合到一张图片文件中。再通过一定方式从图片文件中取出所需Icon并显示。其中CSS Sprite、Icon Font使用最多。 CSS Sprite： 原理是将多个icon按一定规律整合到图片文件中，再利用CSS的"background-image"，“background-repeat”，"background-position"的组合进行图片定位并显示。优点：技术成熟，兼容性好；缺点：在实际需求中
background.rar_K._k-means gaussian
07-15
backgound subraction using gaussian mixture model and k means clustering
php-noise.com:php-noise项目的首页
05-02
php-noise.com php-noise项目的主页。 :globe_with_meridians: 主页： 项目：
android-ripple-background.zip
07-30
android-ripple-background.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
electron-vue-background-processing.rar
06-12
electron-vue-background-processing 示例 新建多个background-processing 以实现electron-vue的多线程
cordova-plugin-background-upload:用于背景上传的Cordova插件
03-31
支持平台的iOS 安卓安装要安装插件： cordova plugin add cordova-plugin-background-upload --save要卸载此插件： cordova plugin rm cordova-plugin-background-upload样本用法该插件需要在上传之前进行初始化。...
详解CSS中iconfont的使用
12-13
初识iconfont 就算我们一开始不懂这个英文不懂是干嘛的，对于iconfont，英文从后往前读应该叫做：字体图标。这里面已经包含两个概念，首先必须是字体，第二，就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性，所以这个iconfont必须是以文字嵌入到样式中，所以想到的必须是font；既然是图标那么它就必须有一个路径来引入进来，首先我们一开始想到的img这个标签，既然又是文字又是图标，我们能想到的就只有这个@font-facecss3属性。 还有这个iconfont后来词语，并不是一开始就出现的，网页制作者或者学者想要叫起来更爽口所赋予的一个表现层的东西。
iconfont使用简易教程 svg
jack_rose_me的博客
12-11 1023
因为自己的项目中需要使用图标，而本人不擅长前端。因此了解到阿里的iconfont矢量图标是一个不错的图标库。下文介绍最简易，通用的使用图标方式以便参考。 一、 寻找适用的图标 官方网址：http://www.iconfont.cn/找到需要的icon 以为例，添加入库。 二、 生成代码： 点击右上角购物车图标 点击下载代码，得到zip包，解压即可获得需要的文件。 ...
Html 使用svg图标、iconfont的使用方法
林中明月间丶
02-05 3169
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=
CSS学习笔记--第五天
Android Studio中实现普通、点击、禁用状态下圆角按钮背景颜色的改变
01-27 274
文章目录八、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 解决图片底部默认空白缝
06.font&background------02.图标字体（font awesome库）
weixin_52551539的博客
11-01 274
图标字体（iconfont）： 1. 在网页中我们需要引入一些图标，我们可以通过图片引入图标，但由于图片本身较大，而且不灵活，所以一般不采用；但由于字体放大后不失真、可以改变颜色、随意调整大小，实现起来比较灵活，所以我们一般将图标直接设置为字体，然后通过font-face来引入，这样就可以通过字体的形式来引入图标。 2. 常用的一些图标字体库有：font awesome和 font awesome库使用的步骤： a. 下载（font awesome英文官网...
img/background/iconfont---谁最适合你？
weixin_34090643的博客
06-30 440
前言 第一篇文章，小弟先做一番自我介绍^ω^姓名不说，年龄21岁，湖北武汉一所二本大学2016届本科毕业生，大四前的暑假起对web前端产生兴趣并有半年实习经验。ng、vue、react等等高大上的框架完全不懂，却也靠前端交流群和百度积攒下了一些小小心得。说来写文章也是比较心虚，怕有理解不到位之处还可能祸害别人。可是万一哪位大牛看到之后闲来...
阿里巴巴iconfont的简单使用
pleasecallme_522的博客
10-16 6825
今天写作业的时候，遇到了这样一个问题： 很明显，需要用到四个图标。其实上一次整理过一篇关于奥森图标使用方法的博客，今天也第一个想到去奥森图标的官网去找找看。可是奥森图标网站没有检索功能，我就那样一页一页地找啊，差点瞅瞎了我的超级无敌卡姿兰大眼睛也没找到（也许是我不会搜索，反正我是没找见在哪搜）。。。后来就又想到了老师之前介绍过的阿里巴巴iconfont，现将使用方法总结如下：1.阿里巴巴iconf
.calendar-days-item.today { background-color: #f6f6f6; } .calendar-days-item.selected { background-color: #ffca3e; color: #fff; }
最新发布
06-12
这是一段 CSS 样式代码，用于设置一个日历控件中不同日期状态下的背景色和字体颜色。其中，`.calendar-days-item.today` 表示当天日期的样式，背景色为 #f6f6f6（浅灰色）；`.calendar-days-item.selected` 表示选中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值