iconfont创建前端图标库

原创 已于 2022-01-27 17:17:14 修改 · 439 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css

于 2021-04-28 18:36:46 首次发布
本文介绍了如何在百度官网中找到并使用Iconfont下载图标资源。首先需要注册登录Iconfont官网，搜索并选择所需的图标，将其添加到购物车。接着创建或选择已有项目，下载图标文件，并将必要的字体文件和CSS引入到自己的项目中，修改CSS引用路径。最后，在HTML中引入iconfont.css，并通过图标码展示图标。这是一个关于前端开发中使用图标库的教程。

在百度官网中搜索iconfont官网点击进入
在这里插入图片描述
首先你需要用注册登录
然后在右上角输入框中选择你想找的图标
在这里插入图片描述选择自己喜欢的图标加入购物车
在这里插入图片描述点击右上角购物车
在这里插入图片描述
你可以选择加入已有的项目或者新创建一个项目
在这里插入图片描述
进入资源管理下的我的项目
在这里插入图片描述
将图标下载到本地并解压
在这里插入图片描述
将iconfont.css iconfont.ttf iconfont.woff iconfont.woff2 进入到自己的项目中然后将刚下过来的font 文件全部删掉
在这里插入图片描述
将iconfont.css引入的文件修改为本地文件路径
在这里插入图片描述

在html中引入iconfont.css

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

通过图标码生成图标

   <span class = "icon iconfont">
       &#xe60c;
   </span>

然后我们就可以看的好看的图标了

哈哈哈，亲爱的小伙伴 你，学(废)了吗？

《前端》阿里字体库iconfont使用方法
BelleDiao的博客
01-31 1948
1、到阿里字体库网站中，登录账号。http://www.iconfont.cn/ 我的账号是我的126邮箱。 2、在图标库中查找自己需要的图标，并加入购物车，添加至项目中。最后下载到本地。 3、如何将想用的图标应用在html网页中？ 下图为下载的阿里图标。 首先将iconfont.css文件引入到html中（注意路径）： <link re...
转转搭建 iconfont 平台实践
大转转FE
06-16 729
背景icon 的管理是设计稿转代码过程中，重要但容易被忽视的环节。所以在实际的业务代码中 icon 问题的解决方案往往也是八仙过海，能用就行。比如导出为 png, svg 格式的文件，在项...
Iconfont搭建组件库的字体图标库
GHkmmm的个人博客
08-08 863
前言 该系列文章主要记录搭建自己组件库中遇到的问题，分享自己在搭建组件库过程中遇到的坑，并且会通过分享源码的方式，讲解每个组件封装的重点难点，最终会发布到npm上。 项目已开源至GitHub，喜欢的朋友记得帮我点个star哦！ 项目源码地址：OreoUI 通过Iconfont搭建组件库的字体图标库 组件库中搭建自己的字体图标库是必要的 所以我们希望在使用到组件库的时候，能通过我们准备好的css文件，通过其中的类名去引用对应的图标 <!-- 引用”关闭“图标 --> <i class="or
轻量级前端SVG图标库ceri-icon实战应用
最新发布
weixin_35920379的博客
09-19 471
ceri-icon是一款面向现代前端工程的轻量级图标管理库，致力于解决传统图标引入方式中资源冗余、加载低效和维护困难等问题。其核心设计理念是“按需加载、模块封装、内联渲染”，通过将 SVG 图标转化为 JavaScript 模块，结合构建工具的静态分析能力，实现图标的精准引入与高效使用。该库充分利用 Webpack 的模块化机制与 Tree Shaking 特性，确保仅打包实际使用的图标，从源头控制包体积，提升应用性能。
前端学习之字体图标(iconfont)
no pains,no gains
07-02 4533
Web字体 字体格式 不同的浏览器支持的字体格式是不一样的。 tureTypeFont(.ttf)格式 . ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+ OpenTypeFont(.otf)格式 .otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0
【前端开发】iconfont 阿里巴巴免费矢量图标库超级实用!
极客小俊
01-26 4494
国内功能很强大且图标免费内容很丰富的矢量图标库!
Vue、Element-ui项目中如何使用Iconfont(阿里图标库)
热门推荐
棋鬼王的博客
03-29 8万+
我们使用element-ui、vue开发网站的时候，往往图标是起着很重要的作用。 2018-11-9更新 1.傻瓜式引用：由于这种方法及其简单 省去了很多繁琐的步骤， a.引入项目生成的，图标地址。 b.使用推荐使用这种，详情请看文档！！文档够详细的了。http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.d8cf4...
Vue使用Iconfont图标库
Joey_Tribiani的博客
04-24 1742
Vue使用Iconfont图标库 创建vue项目 先基于Vue脚手架vue-cli搭建Vue2.x项目 vue create icontest 安装依赖并运行 // 安装 yarn (npm install) // 运行 yarn serve (npm run serve) 创建iconfont项目仓库 正在iconfont官网找到资源管理下拉菜单的我的项目选项，进去后点击加号创建项目 创建好项目后就可以尝试添加图标到项目 引入到前端项目 在刚刚创建好的vue项目中的/src/assets目录下
Web-前端html+css从入门到精通 156. iconfont矢量图标库.zip
05-23
iconfont矢量图标库”将深入讲解如何使用Iconfont来创建和应用矢量图标。 首先，理解HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）的基本概念至关重要。HTML是用于创建网页结构的语言，包括...
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
前端如何在项目中使用iconfont 引入iconfont 图标库怎么用css调整大小
03-25
### 如何在前端项目中引入并使用 Iconfont 图标库 可以通过以下方法实现 Iconfont 的引入和配置： #### 方法一：通过 JavaScript 动态加载图标 可以在项目的入口文件 `main.js` 中动态引入阿里巴巴矢量图标库，并...
css_iconfont
01-06
css_iconfont css_iconfont用法
使用icon fonts来辅助CSS处理图片
12-13
由于移动端设备拥有不同分辨率，PPI 等引起的问题， 常常需要针对不同屏幕分辨率来调整优化，如使用 @2x 图片， max-width 限制等。采用 css @font-face 用来显示 icon 也不失为一种好办法。因为 icon fonts (字体)是矢量图形，所以不受分辨率的影响，同时可以做到完美缩放；当然，也可使用在 WEB 端。优点     文件小    加载性能好    支持 css 样式    IE6/7 下也支持 缺点     样式限制，使用扁平化风格    移动端还存在不兼容问题      少量移动设备和 icon fonts 字符编码冲突    FF和 IE9 下跨域问题
iconfont.css免费给大家了
03-25
一些文字代码
15、前端开发：CSS知识总结——iconfont图标库用法
不迁怒，不贰过。小知识，大智慧。
08-21 5740
iconfont图标库用法
前端引入iconfont矢量图标详细步骤（图文）
G_matinal的博客
02-03 3361
我们在编写网页的时候，为了防止加载过多的图片导致网页加载缓慢的问题，从而需要引入一部分矢量图标库里面的图标来进行操作，这里主要的为大家展示国内阿里巴巴矢量图标库的使用教程。
前端框架增加自定义fontIcons的方法
阿留申低压的博客
10-26 1666
在这里主要介绍的是阿里巴巴的矢量图标管理网站（Iconfont.cn），它也是国内首家推广Webfont形式图标的平台。Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。在这里分三点进行说明。一、图标制作制作设计师同学可以根据官方提供的设计规范进行制作，工具是AI，制作完成导出的时候需要另存为SVG格式。 制作完成就需要进行下
iconfont的使用（最详解）
富朝阳的博客
02-20 1万+
Iconfont 是阿里巴巴矢量图标库平台（http://iconfont.cn），它允许用户访问大量图标并将它们用作网页、移动应用或其他数字界面的一部分。以下是关于 Iconfont 的介绍和使用
iconfont字体图标和各种CSS小图标
weixin_30312563的博客
03-02 1229
前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！ iconfont字体图标 　　我们的需求中，很多时候会看到一些小的图形，或者叫图标，比如天猫网站中： 　　 　　这些小图形我们可以用图片代替，通常我们是把这些图形切图之后做成精灵图（又叫雪碧图）； 　　精灵图的原理：把很多小图片集合成一张大图片，然后用设置背景图的位置来显示图片...
iconfont图标库在前端项目中的实战应用教程
iconfont作为阿里巴巴推出的一款强大的矢量图标库工具，已经成为现代前端开发中不可或缺的重要资源之一。它不仅提供了海量免费且高质量的矢量图标，还支持用户自定义图标项目、在线管理图标集合，并可通过多种方式...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值