比特派官网公告最新版下载|iconfont图标

一键背景去除工具 | 美图抠图

去除工具 | 美图抠图产品抠图人像宠物抠图商品货品抠图图标印章抠图拓展工具海报设计图片编辑在线拼图证件照制作工具箱使用教程立即登录登录查看剩余下载张数购买张数在线咨询意见反馈下载客户端退出登录一键移除背景3s一键抠图，快速去除背景支持批量最高30张支持批量粘贴图片、网址，或拖拽图片、文件夹至此。 支持批量处理30张图片。上传图片上传文件夹 >全品类 AI 智能抠图人像宠物商品图标“抠”细节，美图比你更细致发丝边缘聚焦完整干净保留发丝细节、根根分明无损高清画质画质增强，比原图更清晰始于抠图的创意去设计去设计去设计去设计去设计不仅仅是抠图换背景滤镜改尺寸边缘优化投影描边画质修复更多使用教程如果找不到你想要的答案，点击这里查看更多使用方法智能AI，高效自动抠图！商品一键抠图，店主们都在使用！如何一键三步抠出复杂logo？一分钟教你快速抠出萌宠毛发！一学就会的人像抠图技巧3s一键抠图，快速去除背景上传图片您已免费获得

0

张抠图张数欢迎您的加入！

0

天内有效我知道了返回结果中抠图人像宠物抠图商品货品抠图图标印章抠图拓展工具海报设计图片编辑在线拼图证件照制作工具箱© 2024 meitu. All Rights Reserved. 营业执照, 经营许可证, 闽公网安备 35020302000186号, 闽B2-20040192, 闽网文(2018)8421-380号, 违法和不良信息举报电话：400-990-9696, 网络文

上海申佑美文化传播有限公司

佑美文化传播有限公司 店铺首页供应商品店铺档案留言问价正在

iconfont-阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库

CSS3 iconfont字体图标的使用（很详细）_inconfont网站的图标库不包括那个图标分类-CSDN博客

>

CSS3 iconfont字体图标的使用（很详细）_inconfont网站的图标库不包括那个图标分类-CSDN博客

CSS3 iconfont字体图标的使用（很详细）

最新推荐文章于 2024-03-11 21:46:58 发布

coderwyb

最新推荐文章于 2024-03-11 21:46:58 发布

阅读量1w

收藏

30

点赞数

9

文章标签：

css

css3

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/WU567_/article/details/104982557

版权

CSS3 iconfont(字体图标)

首先来看看什么是字体图标，在哪里使用？ 比如天猫的商品分类栏： 还有小米商城的底部栏： 所以字体图标的使用的是比较多的，而且是很方便更改它的大小以及颜色的，还可以使用彩色的字体图标。 首先分享一个非常多字体图标的网站： https://www.iconfont.cn/（阿里巴巴矢量图标库） 在这里，基本上你想使用的图标都可以找到，那么接下来我们就看看是如何引入的这些字体图标的？ 比如刚才天猫商品分类栏中的几个图标： 1、首先新建一个项目，我这里新建一个天猫： 2、直接在搜索框输入要用的字体图标： 3、找到你需要的图标，加入购物车： 4、从购物车中选中下载好的字体图标，加入天猫项目： 下载至本地： 5、首先创建一个iconfont的文件夹（方便代码引入），打开下载好的压缩文件，将里面的东西全部复制到iconfont文件夹下： 6、打开demo_index.html文件我们可以看到引入方法（引用font-class）： 准备工作已完成，接下来我们来代码引入这些字体图标： 1、引入单色字体图标：按照上图的引入方法连接外部iconfont.css文件（注意引入地址不要出错） 红框为要引入的字体图标，在刚刚创建的天猫项目中复制代码即可： 这就引入成功了： 还可以设置字体图标的大小和颜色： 2、引入彩色图标 还是打开demo_index.html文件我们可以看到引入方法（引用Symbol） 按照上图所示，此时引入iconfont.js 红框为要引入的字体图标，也可以设置大小： 这就OK啦！

优惠劵

coderwyb

关注

关注

9

点赞

踩

30

收藏

觉得还不错?

一键收藏

知道了

0

评论

CSS3 iconfont字体图标的使用（很详细）

CSS3 iconfont(字体图标)首先来看看什么是字体图标，在哪里使用？比如天猫的商品分类栏：还有小米商城的底部栏：所以字体图标的使用的是比较多的，而且是很方便更改它的大小以及颜色的，还可以使用彩色的字体图标。首先分享一个非常多字体图标的网站：https://www.iconfont.cn/（阿里巴巴矢量图标库）在这里，基本上你想使用的图标都可以找到，那么接下来我们就看看是...

复制链接

扫一扫

详解CSS中iconfont的使用

12-13

初识iconfont

就算我们一开始不懂这个英文不懂是干嘛的，对于iconfont，英文从后往前读应该叫做：字体图标。这里面已经包含两个概念，首先必须是字体，第二，就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性，所以这个iconfont必须是以文字嵌入到样式中，所以想到的必须是font；既然是图标那么它就必须有一个路径来引入进来，首先我们一开始想到的img这个标签，既然又是文字又是图标，我们能想到的就只有这个@font-facecss3属性。

还有这个iconfont后来词语，并不是一开始就出现的，网页制作者或者学者想要叫起来更爽口所赋予的一个表现层的东西。

iconfont字体图标.pdf

06-27

iconfont介绍

（1）意义：使用字体用HTML代码以文本的形式直接在网页中画icon小图标。

（2）为什么使用icon字体图标：使用图标字体可大大减少图标维护工作量。

（3）灵活性：轻松地改变图标的颜色或其他CSS效果。

（4）可扩展性：改变图标的大小，就像改变字体大小一样容易。

（5）矢量性：图标是矢量的，与像素无关。缩放图标不会影响清晰度。

（6）兼容性：字体图标支持所有现代浏览器（包括IE6）。

（7）本地使用：通过添加定制字体到你的本地系统，你可以在各种不同的设计和编辑应用程序中使用它们。

参与评论

您还未登录，请先

登录

后发表或查看评论

字体图标库icomoon和iconfont使用方法

weixin_72322475的博客

09-29

1314

字体图标库icomoon和iconfont使用方法

iconfont字体图标的使用方法

cC123580的博客

11-19

86

选择需要的图片，添加入库，点击右上角购物车， 添加至项目。将下载的文件添加到项目下。

Web端如何引用iconfont，iconfont所有的引用方式。

热门推荐

RunCoder

04-05

2万+

一、如何下载iconfont图标。

在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比如我们选择其中的一个作为示例。                                                          

 

鼠标悬浮上后会出现三种选择：

    1.添加入库：功能和淘宝中的购物车一样，可以添加多个图标进行操作。.

    2.收藏：       ...

15、前端开发：CSS知识总结——iconfont图标库用法

不迁怒，不贰过。小知识，大智慧。

08-21

5116

iconfont图标库用法

【CSS】阿里iconfont的使用方法（另附font-family引入方法）

weixin_42771853的博客

12-21

4076

介绍在 CSS 中引入阿里 iconfont 图标的方法（另附通过font-family引入的方法，无需声明class）

SenchaTouch如何用字体icon font图标字库

阳光刘少

01-26

1805

最近在研究icon font图标字库，觉得很有意思，于是找了一些比较好的在线字库。大都是开源的，而且各有特色，推荐给大家！

阿里icon font字库

http://www.iconfont.cn/

这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。

fontello

http://fontello.co

CSS之iconfont导入方式

weixin_53027472的博客

07-21

4769

本文章主要是使用iconfont的教程，html页面中如何引入阿里巴巴icon

CSS学习笔记之iconfont图标库的使用

weixin_52540797的博客

10-24

1352

在VSCode中选择文件夹font-veafwwbvy下的iconfont.css中图标的类名，并复制类名，如下图。在html文件中，首先通过link引入iconfont.css的路径，其次，在class中粘贴图标类名。点击复制代码（在线路径），再选择所需要的多色图标，复制代码（多色图标的类名）打开阿里巴巴矢量图标库，在素材库中选择多色图标库 ,选择一款多色图标。点击右上角新建文件图标，将多色图标添加到新建项目，点击确定。点击右上角新建文件图标，将多色图标添加到新建项目，点击确定。

前端CSS常用图标字体资源

03-31

字体都是矢量图,不会因放大而失真

有些地方需要小图标,不能都用图片,否则会很麻烦

所以在使用图标时,还可以直接将图标设置为字体,然后通过font-face的形式,对字体进行引入,然后就可以通过使用字体的形式来使用图标.称为图标字体(iconfont)

在此提供图标库,大家可以下载下来直接使用

下载好了之后,将文件放在和项目同一个目录下

将css文件夹中的all.css文件引入

通过以下语句引入:

微信小程序使用CSS3字体

03-29

@font-face是CSS3中的一个模块，它主要是把自己定义的Web字体嵌入到的网页中。

@font-face的语法规则：

 

@font-face {

font-family: ;

src: [][, []]*;

[font-weight: ];

[font-style:

```

5. 在需要使用字体图标的地方，使用``或其他合适的组件，并设置`class`属性为图标对应的类名。例如：

```html



```

在上面的代码中，`iconfont` 是字体图标库的类名，`` 是具体的图标字符码点。

6. 根据需要设置图标的样式，如颜色、大小等。可以通过内联样式或CSS类来实现。

请注意，具体使用哪个类名和字符码点取决于你所选择的图标和下载的字体文件。在阿里巴巴矢量图标库中，每个图标都有对应的类名和字符码点，可以在图标库中查找并使用。

希望这些步骤能帮助你成功使用阿里巴巴矢量图标库！如果还有其他问题，请随时提问。

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

非常没帮助

没帮助

一般

有帮助

非常有帮助

提交

但行好事wlw

CSDN认证博客专家

CSDN认证企业博客

码龄4年

暂无认证

83

原创

6万+

周排名

72万+

总排名

18万+

访问

等级

1315

积分

169

粉丝

373

获赞

109

评论

1033

收藏

私信

关注

热门文章

学成在线网页制作（详细）

23418

阿里妈妈iconfont矢量图标的使用方法(超详细)

22156

GitHub 详细使用【 详细 】

20870

less安装教程【详细】 以及使用

16023

JS 本地储存 【详细】

9775

分类专栏

面试

1篇

Vue

5篇

微信小程序

1篇

解决一些头疼的问题

5篇

JavaScript

36篇

Git/Github

2篇

Node

3篇

计算机网络

1篇

CSS

21篇

移动端开发

5篇

HTML

13篇

PS

1篇

VScode

1篇

个人资料

前端路线

1篇

最新评论

微信小程序父子组件之间传值

但行好事wlw:

棒

微信小程序父子组件之间传值

m0_49471172:

很有用，谢谢大佬

学成在线网页制作（详细）

2301_81771354:

我也要球球了

学成在线网页制作（详细）

Cat506:

求一份

学成在线网页制作（详细）

但行好事wlw:

没问题 私聊我

最新文章

web前端面试题

Vue组件间的通信【子传父，父传子，同级传递，爷孙传递】

微信小程序父子组件之间传值

2022年30篇

2021年53篇

目录

目录

分类专栏

面试

1篇

Vue

5篇

微信小程序

1篇

解决一些头疼的问题

5篇

JavaScript

36篇

Git/Github

2篇

Node

3篇

计算机网络

1篇

CSS

21篇

移动端开发

5篇

HTML

13篇

PS

1篇

VScode

1篇

个人资料

前端路线

1篇

目录

评论 1

被折叠的  条评论

为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

祝福语

请填写红包祝福语或标题

红包数量

个

红包个数最小为10个

红包总金额

元

红包金额最低5元

余额支付

当前余额3.43元

前往充值 >

需支付：10.00元

取消

确定

下一步

知道了

成就一亿技术人!

领取后你会自动成为博主和红包主的粉丝

规则

hope_wisdom 发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额

0

抵扣说明：

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

余额充值

引入阿里iconfont图标方法以及注意事项 - 知乎

引入阿里iconfont图标方法以及注意事项 - 知乎切换模式写文章登录/注册引入阿里iconfont图标方法以及注意事项tuonioooo​计算机技术与软件专业技术资格证持证人背景在我们做日常项目时，通常会用到icon图标或者是一些图标字体，阿里iconfont是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式iconfont新建项目官网：https://www.iconfont.cn/ 在首页选择【图标管理】-【我的项目】点击 【我的项目】填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。添加图标新建好项目后，找到自己想要的图标，加入购物车。点击页面右上角的购物车图标，打开自己的购物车，选择添加至项目，我们就可以在自己的项目下看到添加的图标了。在我们的项目下，可以对图标进行编辑，如：大小、颜色、填充色，旋转等操作。Vue工程中引入iconfont官方文档：https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code根据官方文档，有unicode引用、font-class引用、symbol引用三种引入方式，这三种方式又分有两种情况：下载到本地引入，在线链接引入。在Iconfont网页我们自己的项目下可以看到这些方式选择。unicode引用 不推荐本地引入unicode方式代码量少，并不需要下载本地文件。链接引入unicode模式下的在线链接指的是font-face代码。在vue中，将项目生成的font-face代码和自定义的iconfont样式写在App.vue的style中，就可以在项目中引用图标了。此时样式是全局作用的，如果想要实现图标不同的样式，可以增加一层自定义样式。在”myIconStyle”样式中修改color等属性可以覆盖全局的样式，实现单个的样式修改。这里注意理解下，官方文档说的“不支持多色”，是指我们iconfont网页项目中，就算有多色图标，引用的时候会自动去色，统一变成默认的颜色，不管你给图标一编辑了红色图标二编辑了黄色，在项目中用unicode方式引用的时候都会变成默认颜色，但是我们仍然可以通过修改css样式实现图标颜色自定义，只是这个颜色编辑放在代码层面来了。font-class引用 推荐使用如官方文档所说，font-class是为了让程序更加直观可读，直接用unicode会造成阅读困难。font-class模式关键在于生成的css文件。本地引入按照下图选择文件放入自己的项目中，vue中建议在assets文件夹下新建一个iconfont文件夹，放相关文件。常用的就是：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2@font-face {

font-family: "iconfont"; /* Project id 2974228 */

src: url('iconfont.woff2?t=1640340931514') format('woff2'),

url('iconfont.woff?t=1640340931514') format('woff'),

url('iconfont.ttf?t=1640340931514') format('truetype');

}再就是引入时，需要注意的是字体文件路径引用是否准确，否则打包可能不识别然后在main.js中引入iconfont.css文件，就可以正常使用了。import './assets/iconfont/iconfont.css'链接引入方式一：在index.html头部中，引入css文件即可方式二：点开css代码链接复制css代码，在项目中粘贴到iconfont.css文件中 ，在App.vue或main.js中引入import './assets/iconfont/iconfont.css'注意：iconfont.css中url 官方默认是cdn 链接, 打包时请改成http否则不识别@font-face {

font-family: "iconfont"; /* Project id 2974228 */

src: url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff2?t=1639986814919') format('woff2'),

url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff?t=1639986814919') format('woff'),

url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.ttf?t=1639986814919') format('truetype');

}打包后@font-face {

font-family: "iconfont"; /* Project id 2400747 */

src: url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff2?t=1634895844844') format('woff2'),

url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff?t=1634895844844') format('woff'),

url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.ttf?t=1634895844844') format('truetype');

}symbol引用 不推荐本地引入将下载好的iconfont.js文件放入自己的工程目录，在main.js中引入，在App.vue中写好通用css代码，即可使用。import './assets/iconfont/iconfont.js'这里注意一点，下载下来的js文件是压缩过的，如果项目使用了eslint语法校验会疯狂报错，可以在js文件开头加入 /* eslint-disable */来指定该文件不应用eslint校验。链接引入在index.html头部中，引入js文件即可uni-app 引入iconfont图标基本上引入方式跟上Vue相同，但是会遇到打包时图标引入不显示的问题，解决方式如下：1.在iconfont.css中，需要使*~@* 将路径添加完整@font-face {

font-family: "iconfont"; /* Project id 2642111 */

src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'),

url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),

url('~@/static/fonts/iconfont.ttf?t=1625021641165') format('truetype');

}2.在App.vue全局引入iconfont.css3.使用图标，在标签内的class通过"iconfont icon-"添加下载好的图标即可或通过官方uni-icons 引入自定义图标

总结 symbol引用最受官方推荐，也是最优的方式，但是浏览器兼容不好，目前来看，前端需要兼容一些低版本的浏览器，所以如果考虑到用户使用，不建议采用symbol引用。 unicode引用浏览器兼容最好，但是可读性差，font-class引用虽然兼容性比unicode引用差一点，但是提高可读性，综合来看，目前项目中还是采用font-class引用比较好。 因为引用网络资源的不稳定，所以建议采用本地引入的方式。 如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的iconfont文件。 再就是引入时文件路径的问题，打包都需要注意。点击下方卡片/微信搜索，关注公众号“天宇文创意乐派”(ID:gh_cc865e4c536b)听说点赞和关注本号的都找到漂亮的小姐姐了哟且年后必入百万呀！！往期推荐分享6个实用的网站，非常Nice利用Vue 脚手架 开发chrome 插件，太方便了！Vue类似hooks的新库VueUse使用NodeJs和JavaScript开发微信公众号再见 Swagger UI！国人开源了一款超好用的 API 文档生成框架，Star 4.7K+，真香！！JavaScript 细节和一些实际应用，了解一下本文使用 文章同步助手 同步编辑于 2021-12-27 22:54图标Icon Font阿里软件​赞同 4​​添加评论​分享​喜欢​收藏​申请

一键背景去除工具 | 美图抠图

去除工具 | 美图抠图产品抠图人像宠物抠图商品货品抠图图标印章抠图拓展工具海报设计图片编辑在线拼图证件照制作工具箱使用教程立即登录登录查看剩余下载张数购买张数在线咨询意见反馈下载客户端退出登录一键移除背景3s一键抠图，快速去除背景支持批量最高30张支持批量粘贴图片、网址，或拖拽图片、文件夹至此。 支持批量处理30张图片。上传图片上传文件夹 >全品类 AI 智能抠图人像宠物商品图标“抠”细节，美图比你更细致发丝边缘聚焦完整干净保留发丝细节、根根分明无损高清画质画质增强，比原图更清晰始于抠图的创意去设计去设计去设计去设计去设计不仅仅是抠图换背景滤镜改尺寸边缘优化投影描边画质修复更多使用教程如果找不到你想要的答案，点击这里查看更多使用方法智能AI，高效自动抠图！商品一键抠图，店主们都在使用！如何一键三步抠出复杂logo？一分钟教你快速抠出萌宠毛发！一学就会的人像抠图技巧3s一键抠图，快速去除背景上传图片您已免费获得

0

张抠图张数欢迎您的加入！

0

天内有效我知道了返回结果中抠图人像宠物抠图商品货品抠图图标印章抠图拓展工具海报设计图片编辑在线拼图证件照制作工具箱© 2024 meitu. All Rights Reserved. 营业执照, 经营许可证, 闽公网安备 35020302000186号, 闽B2-20040192, 闽网文(2018)8421-380号, 违法和不良信息举报电话：400-990-9696, 网络文

上海申佑美文化传播有限公司

佑美文化传播有限公司 店铺首页供应商品店铺档案留言问价正在