tokenpocket钱包app新版本下载|前端icon图标

分享43个前端、设计师常用优质的图标资源 - 知乎

分享43个前端、设计师常用优质的图标资源 - 知乎首发于优质资源切换模式写文章登录/注册分享43个前端、设计师常用优质的图标资源zero来一场好运设计 岑寂中侧耳倾听UniconsUnicons 开源矢量图标和图标字体库。IconParkIconPark 图标库是一个通过技术驱动矢量图标样式的开源图标库，可以实现根据单一SVG源文件变换出多种主题， 具备丰富的分类、更轻量的代码和更灵活的使用场景；致力于构建高质量、统一化、可定义的图标资源，让大多数设计师都能够选择适合自己的风格图标，并支持把图标源文件导出为React、Vue2、Vue3、SVG多种形式的组件代码，让开发者使用更高效FeatherFeather 是简单漂亮的开源图标的集合。每个图标均以 24x24 网格设计，强调简单性，一致性和灵活性。Font AwesomeFont Awesome 互联网上最流行的图标工具包已经重新设计，从头开始构建。除此之外，还有图标字体连字、SVG 框架、React 等流行前端库的官方 NPM 包，以及访问新 CDN 的功能。IconfontIconfont 阿里妈妈 MUX 倾力打造的矢量图标管理、交流平台，设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。Material PaletteMaterial Palette：可以自由选择材质设计的调色板，图标和颜色。Google Material Deisgn IconsGoogle Material Deisgn Icons 谷歌提供符合 Material 设计规范的免费图标库，可在 Web、Android 和 iOS 项目中。IcoMoonIcoMoon 是一个图标解决方案，提供三项主要服务：矢量图标包，IcoMoon 应用程序和以 SVG 或字体形式托管图标。Tabler IconsTabler Icons 提供一套超过1250个免费 MIT 许可的高质量 SVG 图标供您在您的 Web 项目中使用。还有一个跟它很像，不知道是不是同一个。Tabler Icons 提供1262个完全可定制的免费 SVG 图标。HeroiconsHeroicons 一组免费的 MIT 许可的高质量 SVG 图标，用于 UI 开发。My IconMy Icon 一套免费图标，用来更换 iOS 14 的图标。一共有几千个图标可供选择，还允许自定义和编辑。Captain IconCaptain Icon 提供 350+ 超赞免费矢量图标，增强您的移动和网页设计能力CSS IconCSS Icon SVG Sprite，样式组件，NPM 和 API 中提供了开源 CSS，SVG 和 Figma UI 图标。IoniconsIonicons 是一个完全开源的图标集，有1300个为 Web、iOS、Android 和桌面应用程序特制的图标。Ionicons 是为 Ionic 框架而构建的，所以图标既有材质设计，也有 iOS 版本。IkonateIkonate 是完全可定制的和可访问的，经过优化的矢量图标。Eva IconsEva Icons 包含480多种制作精美的开源图标，用于常见操作和项目。Icon NinjaIcon Ninja 支持近 100 万免费图标素材的搜索引擎，支持关键词搜索，所有的素材均提供详细的如格式、宽度、高度、文件大小等信息，适合前端工程师或 PPT 设计师使用。素材格式是 PNG、SVG。The Noun ProjectThe Noun Project 网站免费提供超过580个高度可辨识的符号图标，这种图标只用很简单的图像及黑白两色来强调表现事物的特征，因此很容易让人辨识出它的主题。Icons8Icons8 提供了一系列免费的图标、插图等资源。Animated IconsAnimated Icons 是 Icons8 提供的免费动态图标服务，支持的格式有基于 Lottie 的 JSON、传统 GIF 动画，以及 After Effects 格式，可以方便的插入到视频中。FlaticonFlaticon 一个提供四百多万海量免费图标素材库，提供 PNG、SVG、EPS、PSD 和 BASE 64 矢量图标格式，完全可以满足你 UI 设计和网页设计项目。IconfinderIconfinder 近500万的图标数据库免费图标搜索引擎，提供 PNG，SVG 等格式。ICONSVGICONSVG 一个为简化查找和生成项目通用图标过程的工具，前端设计师尤其需要。Evericons Evericons 为下一个项目收集460多个精心制作的图标，可免费使用及商用。IconsIcons 用于 Bootstrap 的官方开源 SVG 图标库。SwifticonsSwifticons 是一个非凡的图标库。提供 2680个高级图标，24个类别，6种样式。Super Tiny IconsSuper Tiny Icons 每个1KB以下！它是您喜欢的网站和应用程序徽标的微型 SVG 版本。IconBeastIconBeast 是矢量图标和符号的集合。图标不仅针对 iOS 应用开发进行了优化，而且还可以将其用于 Android 设备或任何其他类型的 Web 开发项目。这是超过3000个 iOS 标签栏和工具栏图标的终极软件包，它们是在网格中设计和制造的，可以随时使用并保证像素完美。您还可以使用矢量文件（EPS 和 AI）和适当的软件（Adobe Illustrator，CorelDraw 或 Inkscape）来自定义图标，并且可以将矢量图形调整为任意大小。您可以自由使用针对心脏内容修改过的图标：在应用程序，网站，3D软件，印刷品，横幅中，列表可能会继续存在。IconBeast 提供的格式为 PNG（三种尺寸：30px * 30px，60px * 60px，90px * 90px），Vector AI，矢量 EPS，SVG 和 PSD PNG 也有三种颜色，即黑色，灰色和蓝色。此外，您将可以访问处于活动状态的图标以及500个完全免费的iOS Tab栏图标！IconBeast 将为您提供四十多种具有不同配置文件的图标集，例如用于商业和金融，地图和街道，软件工具和界面，体育和休闲，人类象形图等等。Invision AppInvision App 免费的高质量 UI 套件，图标包和模型库ZondiconsZondicons 一组免费的高级SVG图标，供您在数字产品上使用Maki IconsMaki Icons 是专为地图设计师设计的图标集。Maki 包括公园，博物馆和礼拜场所等常见景点的图标。每个图标都可用作 SVG，有两种尺寸：11px * 11px和15px * 15px。你还可以编辑 Maki 图标，以满足您的项目的需要！您可以更改图标的颜色、添加笔划或背景、上载或删除图标 SVG 以及将图标分组。首先，导入一组新的 Maki 图标，当您完成编辑后，命名您的文件并下载！SVG-MorpheusSVG-Morpheus 支持 SVG 图标从一个变形到另一个。（此项目不再维护）styled-iconsstyled-icons 受欢迎的图标包，例如 Font Awesome，Material Design 和 Octicons，可作为 React 样式的组件使用。它提供了来自以下图标包的 20000 多个图标作为 styled 组件，完全支持 TypeScript 类型和 tree-shaking/ES 模块。Digital Nomad IconsDigital Nomad Icons 由设计师 Nadia 设计的生活类图标和emoji，100%免费使用，不过只有25个。Free fontsFree fonts 提供一系列的字体图标素材，包括 TTF，SVG，EOT，WOFF，OTF等格式，目前接800多万。Find IconsFind Icons 是一个免费图标搜索引擎，拥有全世界最大的图标库，搜索过滤和匹配算法让用户能够找到每个设计任务中需要的图标，例如搜寻特定尺寸、颜色、类型、授权方式等。Visual PharmVisual Pharm 提供超快速搜索的免费的 SVG 图标库，貌似也是 Icons8 搞的平台。Streamline IconsStreamline Icons 涵盖 53 个分类，720 个子分类，拥有超过 30,000 个高质量图标，几乎满足你的所有设计需求。IconmonstrIconmonstr 是一个以简单线条为主的的免费图标库，收录超过 4000 种图标；由单一创作者维护，而且还在不断更新中，这在很大程度上保证了图标的质量；提供 SVG、EPS、PSD、PNG 和内嵌原始码等各种格式下载，满足了设计师和开发者的各种需求场景；Simple IconsSimple Icons 超过1500个免费 SVG 图标的热门品牌。这是由 Dan Leech 在 Gihub 发起的一个开源小项目。Flat Icon DesignFlat Icon Design 此网站为日本的 icon 网站，站内全部使用日文，没有语言切换，但是支持英文检索。Icon 风格为彩色扁平风，下载时可以改变图案大小，颜色及背景，支持 AI，EPS，JPEG，PNG，SVG格式的下载。Icon Hover EffectsIcon Hover Effects 圆形图标的简单悬停效果Twitter EmojiTwitter Emoji 是一个简单的库，提供跨所有平台的标准 Unicode 表情符号支持。它遵循 Unicode 13.0 规范并支持 Emoji 13.0 规范。其他一些资源你可能需要用到编辑于 2021-04-12 18:14前端开发图标设计互联网​赞同 26​​添加评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录优质资源提高开

内行最爱用的6个前端图标库，你全都知道么？ - 知乎

内行最爱用的6个前端图标库，你全都知道么？ - 知乎首发于编程教室切换模式写文章登录/注册内行最爱用的6个前端图标库，你全都知道么？蓝桥云课做实验，学编程 https://www.lanqiao.cn今天给大家推荐6个比较受到前端工程师喜爱的前端图标库。很值得大家收藏噢！希望对你们的工作有所帮助。上期入口：92个Python渗透测试工具合集6. Font Awesome官网：https://fontawesome.com/一套绝佳的图标字体库和 CSS 框架。 Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。5. Fontello官网：http://fontello.com/可以根据您的需求很轻松地制作自定义图标 webfont。4. LivIcons Evolution官网：https://livicons.com/真正的动态 SVG 图标。 这是面向 Web 开发人员和网站所有者的产品。 LivIcons Evolution 是经典 LivIcons 包的下一代现代产品，带有交叉浏览器矢量图标，每个都有独立的迷你动画。 它们基于由 JavaScript 驱动的 SVG（可缩放矢量图形），适用于所有现代浏览器，在任何设备上都看起来很完美。 是的，Retina 也是。3. Ionicons官网：http://ionicons.com/高级设计的图标，用于Web，iOS，Android和桌面应用程序。 支持SVG和Web字体。 完全开源，MIT由Ionic Framework团队授权和构建。2. Icons - Material Design官网：https://material.io/icons/Google 设计团队出品，用于常见操作和项目。 在桌面上下载，在Android，iOS和Web的数字产品中使用它们。1. Iconfont-阿里巴巴矢量图标库官网：http://iconfont.cn/阿里妈妈MUX倾力打造的矢量图标管理、交流平台。 设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。相关推荐20个Java练手项目，献给嗜学如狂的人大牛推荐的10本学习 Python 的好书别再说找不到Python练手项目了，这80个拿去过冬40个大数据学习资源PHP学习资源整理：入门到进阶全系列8个程序员专用软件/网站，个个是神器，第一个最惊喜......RabbitMQ 消息队列Redis基础教程)Shell脚本实现打字游戏Python Flask Web框架Python 图片转字符画Python实现3D建模工具Python3 实现色情图片识别发布于 2019-03-26 17:51程序员前端工程师图标​赞同 15​​添加评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录编程教室分享编程学习教程 shiyanlou.

iconfont-阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库

Icon 图标 | Element Plus

Icon 图标 | Element Plus

跳转到内容指南组件资源Menu Back to top 赞助商Overview 组件总览Overview 组件总览Basic 基础组件Button 按钮Border 边框Color 色彩Container 布局容器Icon 图标Layout 布局Link 链接Text 文本2.3.0Scrollbar 滚动条Space 间距Typography 排版配置组件Config Provider 全局配置Form 表单组件Autocomplete 自动补全输入框Cascader 级联选择器Checkbox 多选框Color Picker 取色器Date Picker 日期选择器DateTime Picker 日期时间选择器Form 表单Input 输入框Input Number 数字输入框Radio 单选框Rate 评分Select 选择器Virtualized Select 虚拟化选择器Slider 滑块Switch 开关Time Picker 时间选择器Time Select 时间选择Transfer 穿梭框Upload 上传Data 数据展示Avatar 头像Badge 徽章Calendar 日历Card 卡片Carousel 走马灯Collapse 折叠面板Descriptions 描述列表Empty 空状态Image 图片Infinite Scroll 无限滚动Pagination 分页Progress 进度条Result 结果Skeleton 骨架屏Table 表格Virtualized Table 虚拟化表格2.2.0Tag 标签Timeline 时间线Tour 漫游式引导2.5.0Tree 树形控件TreeSelect 树形选择2.1.8Virtualized Tree 虚拟化树形控件Statistic 统计组件2.2.30Navigation 导航Affix 固钉Anchor 锚点2.6.0Backtop 回到顶部Breadcrumb 面包屑Dropdown 下拉菜单Menu 菜单Page Header 页头Steps 步骤条Tabs 标签页Feedback 反馈组件Alert 提示Dialog 对话框Drawer 抽屉Loading 加载Message 消息提示Message Box 消息弹出框Notification 通知Popconfirm 气泡确认框Popover 弹出框Tooltip 文字提示Others 其他Divider 分割线Watermark 水印 2.4.0Icon 图标 #Element Plus 提供了一套常用的图标集合。使用图标 #如果你想像用例一样直接使用，你需要全局注册组件，才能够直接在项目里使用。如若需要查看所有可用的 SVG 图标请查阅 @element-plus/[email protected]@element-plus/icons-vue@latest 和有关 Icon Collection 的源码 element-plus-icons安装 #使用包管理器 ## 选择一个你喜欢的包管理器

# NPM

$ npm install @element-plus/icons-vue

# Yarn

$ yarn add @element-plus/icons-vue

# pnpm

$ pnpm install @element-plus/icons-vue

注册所有图标 #您需要从 @element-plus/icons-vue 中导入所有图标并进行全局注册。// main.ts

// 如果您正在使用CDN引入，请删除下面一行。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

app.component(key, component)

}

您也可以参考 此模板。浏览器直接引入 #直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlusIconsVue了。根据不同的 CDN 提供商有不同的引入方式， 根据不同的 CDN 提供商有不同的引入方式， 我们在这里以 unpkg 和 jsDelivr 举例。 你也可以使用其它的 CDN 供应商。使用 unpkg #

使用 jsDelivr #

TIP我们建议使用 CDN 引入 Element Plus 的用户在链接地址上锁定版本，以免将来 Element Plus 升级时受到非兼容性更新的影响。 锁定版本的方法请查看 unpkg.com。自动导入 #使用 unplugin-icons 和 unplugin-auto-import 从 iconify 中自动导入任何图标集。 您可以参考此模板。基础用法 #WARNING因为 HTML 标准已经定义了一个名为 menu 的标签， 如果您注册的 menu 无法正常工作，您需要使用别名来渲染图标。

结合 el-icon 使用 #el-icon 为 raw SVG 图标提供额外的属性, 提供的详细属性请继续阅读。

通过添加额外的类名 is-loading，你的图标就可以在 2 秒内旋转 360 度，当然你也可以自己改写想要的动画。 直接使用 SVG 图标 #

图标集合 #TIP只要你安装了 @element-plus/icons-vue，就可以在任意版本里使用 SVG 图标。您可以点击图标复制代码。Copy SVG contentCopy icon codeSystemPlusMinusCirclePlusSearchFemaleMaleAimHouseFullScreenLoadingLinkServicePointerStarNotificationConnectionChatDotRoundSettingClockPositionDiscountOdometerChatSquareChatRoundChatLineRoundChatLineSquareChatDotSquareViewHideUnlockLockRefreshRightRefreshLeftRefreshBellMuteNotificationUserCheckCircleCheckWarningCircleCloseClosePieChartMoreCompassFilterSwitchSelectSemiSelectCloseBoldEditPenEditMessageMessageBoxTurnOffFinishedDeleteCropSwitchButtonOperationOpenRemoveZoomOutZoomInInfoFilledCircleCheckFilledSuccessFilledWarningFilledCircleCloseFilledQuestionFilledWarnTriangleFilledUserFilledMoreFilledToolsHomeFilledMenuUploadFilledAvatarHelpFilledShareStarFilledCommentHistogramGridPromotionDeleteFilledRemoveFilledCirclePlusFilledArrowArrowLeftArrowUpArrowRightArrowDownArrowLeftBoldArrowUpBoldArrowRightBoldArrowDownBoldDArrowRightDArrowLeftDownloadUploadTopBottomBackRightTopRightTopLeftBottomRightBottomLeftSortSortUpSortDownRankCaretLeftCaretTopCaretRightCaretBottomDCaretExpandFoldDocumentDocumentAddDocumentNotebookTicketsMemoCollectionPostcardScaleToOriginalSetUpDocumentDeleteDocumentCheckedDataBoardDataAnalysisCopyDocumentFolderCheckedFilesFolderFolderDeleteFolderRemoveFolderOpenedDocumentCopyDocumentRemoveFolderAddFirstAidKitReadingDataLineManagementCheckedTicketFailedTrendChartsListMediaMicrophoneMuteMicVideoPauseVideoCameraVideoPlayHeadsetMonitorFilmCameraPicturePictureRoundedIphoneCellphoneVideoCameraFilledPictureFilledPlatformCameraFilledBellFilledTrafficLocationLocationInformationDeleteLocationCoordinateBicycleOfficeBuildingSchoolGuideAddLocationMapLocationPlaceLocationFilledVanFoodWatermelonPearNoSmokingSmokingMugGobletSquareFullGobletFullKnifeForkSugarBowlMilkTeaLollipopCoffeeChickenDishIceTeaColdDrinkCoffeeCupDishDotIceDrinkIceCreamDessertIceCreamSquareForkSpoonIceCreamRoundFoodHotWaterGrapeFriesAppleBurgerGobletGobletSquareOrangeCherryItemsPrinterCalendarCreditCardBoxMoneyRefrigeratorCpuFootballBrushSuitcaseSuitcaseLineUmbrellaAlarmClockMedalGoldMedalPresentMouseWatchQuartzWatchMagnetHelpSoccerToiletPaperReadingLampPaperclipMagicStickBasketballBaseballCoinGoodsSellSoldOutKeyShoppingCartShoppingCartFullShoppingTrolleyPhoneScissorHandbagShoppingBagTrophyTrophyBaseStopwatchTimerCollectionTagTakeawayBoxPriceTagWalletOpportunityPhoneFilledWalletFilledGoodsFilledFlagBrushFilledBriefcaseStampWeatherSunriseSunnyShipMostlyCloudyPartlyCloudySunsetDrizzlingPouringCloudyMoonMoonNightLightningOtherChromeFilledElemeElemeFilledElementPlusShopSwitchFilledWindPowerAPI #Attributes #属性名说明类型默认值colorsvg 的 fill 颜色string继承颜色sizeSVG 图标的大小，size x sizenumber / string继承字体大小Slots #名称说明default自定义默认内容源代码 #组件 • 文档贡献者 # 三咲智子 jeremywu 云游君 qiang btea Xc zhangenming 류한경 Delyan Haralanov M5 Universe zwgwf on the field of hope zazzaz Hades-li dopamine basonwoo Kevin.Liao iamkun Wisdom kooriookami在 Crowdin 上编辑此页面 Container 布局容器Layout 布局Contents赞助商成为赞助商！Your logo链接GitHub国内镜像站点 更新日志Element UI for Vue 2讨论区Discord建议反馈参与贡献SegmentFault

前端开发中icon图标使用的那些门道儿_icon的使用类名和对应的content-CSDN博客

前端开发中icon图标使用的那些门道儿_icon的使用类名和对应的content-CSDN博客

前端开发中icon图标使用的那些门道儿

最新推荐文章于 2023-08-01 23:02:02 发布

Bumphy

最新推荐文章于 2023-08-01 23:02:02 发布

阅读量3.7k

收藏

2

点赞数

2

分类专栏：

前端

图像

CSS布局

HTML

文章标签：

iconfont

svg

前端

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

本文链接：https://blog.csdn.net/Bumphy/article/details/89008547

版权

前端

同时被 3 个专栏收录

25 篇文章

0 订阅

订阅专栏

CSS布局

4 篇文章

0 订阅

订阅专栏

HTML

3 篇文章

0 订阅

订阅专栏

前端开发图标使用

在日常开发，前端coder绕不开一个话题，在页面上添加各种小图标，比如 或者是这样的：

一般来说，总体上有三种方案：

位图图标，png图片，经典的使用场景——精灵图；字体图标，比较有名的：Font Awesome、icon-fontsvg图标，配合前端框架使用，SVG Sprite技术了解一下……

位图图标

在IE时代，由于浏览器的兼容性问题，png图片是一个不得不采用的方案，实际中我们经常谈论的精灵图，就是这种图片。

字体图标

字体图标相比位图而言，具有以下优点：

图像更加清晰；文件更小，一般来说，字体图标相比图片尺寸更小，节省网络资源；灵活性更好，支持按字体的方式去动态调整图标大小，颜色等等；兼容性更好，支持ie6+；

但是，它也有一些问题：

不支持多色图标，在不同的设备上，字体的渲染会有一些差别，这是因为浏览器自身对字体的处理方式的不同造成的，此外，这种问题调整起来较为困难；

关于字体图标的使用，有两个方面需要考虑： 1.如何制作字体图标； 2.如何使用字体图标；

字体图标的制作

关于字体图标的制作，有两个方案： 一是，自己亲自动手制作，借助一些现成的工具，比如：Glyphs、IcoMoon

具体制作方法，可以参考这篇文章：如何把你的图标转换成web字体

二是，使用一些现成的第三方服务，比如前面说到的，Font Awesome、icon-font、IcoMoon；

下面我们具体介绍第二种，使用现成的第三方服务：

首先，从两个网站任选一个，下载选取的字体图标； 我们打开看一下里面的目录结构： 然后，针对上面的情况，我们要将字体文件合并成一个fonts文件夹，icomoon不需要合并，而icofont需要我们调整一下目录。复制style.css文件(iconfont.css)中的css样式，粘贴到实际项目的CSS文件中，我姑且将其重命名为iconfont.css，保持其为一个单独的CSS文件。

最后，将fonts.css引入到html中；

注意：在使用iconfont.css文件时，一定要根据实际的项目结构，调整字体的路径，类似这样的：

@font-face {

font-family: 'icomoon';

/* 调整路径 */

src: url('fonts/icomoon.eot?ln7h60');

src: url('fonts/icomoon.eot?ln7h60#iefix') format('embedded-opentype'),

url('fonts/icomoon.ttf?ln7h60') format('truetype'),

url('fonts/icomoon.woff?ln7h60') format('woff'),

url('fonts/icomoon.svg?ln7h60#icomoon') format('svg');

font-weight: normal;

font-style: normal;

}

字体图标的使用

调用图标字体有三种方法：

通字符（Unicode）引用字体类名（Font-class）Symbol方式

Unicode引用

特点

（1）优点

兼容性最好，支持IE6+，及所有现代浏览器； 支持按字体的方式动态地调整图标大小，颜色等等；

（2）缺点：

显然unicode书写不直观，语意不明确，根据编码无法直接得知图标长啥样子； 因为本质上是字体，所以不支持多色，即便使用的是多色也会在项目中自动去色；

新版的iconfont支持多色图标，这些多色图标在unicode模式下不能使用，推荐使用symbol方式尽心引用；

使用步骤

一、编辑iconfont.css文件

主要有两个地方：

编辑 @font-face定义iconfont的样式

/* 编辑字体文件路径*/

@font-face {

font-family: 'iconfont';

/* 注意路径 */

src: url('iconfont.eot');

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff2') format('woff2'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg');

}

/* 定义iconfont样式 */

.iconfont {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

/* 具体的样式是一些伪类 */

.icon-meifa:before {

content: "\e603";

}

.icon-zhijiayou:before {

content: "\e604";

}

.icon-xiangshui:before {

content: "\e605";

}

.icon-yanying:before {

content: "\e606";

}

二、应用于页面

挑选相应图标并获取字体编码：



unicode编码的查看：iconfont.css文件中伪类元素进行对应即可；

补充：

其实，这编辑iconfont.css文件的时候，有一个地方需要注意一下，就是关于：定义iconfont样式，这部分代码的编写，有两种方式： 第一种：就是前面的方式定义 .iconfont类的样式，这种方式有一个问题，就是在页面引入样式的时候，总是需要重复写上类名iconfont，可能略显繁琐，那么如何做呢？ 第二种：使用属性选择器进行样式匹配：

[class^="icon-"], [class*="icon-"] {

font-family: "iconfont" !important;

font-size: 16px;

font-style: normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

这样，我们在页面引入时，直接写指定的 icon-xxx就可以了；这个其实看个人喜欢哪种喽！?

Font class 字体类名引用

特点

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下优点：

兼容性良好，支持 IE8+，及所有现代浏览器。 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。 使用方便，因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

缺点：

不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤

一、编辑iconfonts.css 文件：

这一步于unicode方式一样，主要区别在于页面引入的方式不同；

二、应用于页面

" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，一般默认是 “iconfont”。

symbol方式

特点

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章

这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

优点

支持多色图标了，不再受单色限制。 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。 因为是矢量图，所以缩放不会失真； 可以通过css实现动画效果； 减少http请求，

因为使用svg-icon后，我再也不用发送woff|eot|ttf| 这些字体库的请求了，所有的svg都可以内联在html内。

缺点：

兼容性较差，支持 IE9+，及现代浏览器。 浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤

一、编辑iconfont.css文件

这一步与前面的两种方法是一样的，区别还是在于引入方式的不同；

二、页面应用

引入的时候，我们需要做三件事情：

（1）引入项目下面生成的 symbol 代码： （2）加入通用 CSS 代码（引入一次就行）： （3）挑选相应图标并获取类名，应用于页面：

这里是一个最终代码的对比图： 我们再来看一下浏览器编译之后的页面： 好了，到此为止，我们已经介绍了前端开发中icon的引入。其实，在当下的开发中，前端三大框架的使用，我们也会通过一些方式进行引入，随后的文章，我将介绍一下如何在vue项目中引入svg图标。

最后

欢迎，交流，一起进步，我是一名前端coder?。

优惠劵

Bumphy

关注

关注

2

点赞

踩

2

收藏

觉得还不错?

一键收藏

知道了

0

评论

前端开发中icon图标使用的那些门道儿

前端开发图标使用在日常开发，前端coder绕不开一个话题，在页面上添加各种小图标，比如或者是这样的：一般来说，总体上有三种方案：位图图标，png图片，经典的使用场景——精灵图；字体图标，比较有名的：Font Awesome、icon-fontsvg图标，配合前端框架使用，SVG Sprite技术了解一下……位图图标在IE时代，由于浏览器的兼容性问题，png图片是一个不得不采...

复制链接

扫一扫

专栏目录

web前端图标大全

04-05

web前端设计还苦于找不到合适的工具小图标吗？这里全都有了！

前端中的icon几种用法

weixin_34372728的博客

02-05

5481

icon 的5种用法

icon有5种常用的用法：

img 用法

background 用法

background 一张图（CSS sprite 雪碧图）

font 字体

SVG

切图

制作 icon ，首先需要素材，这时候就要用到 Photoshop 了。

素材一般有两种：

PSD格式

PNG格式

PSD格式切图

这里我已经准备好了 PSD格式的素材，直接用 Photoshop 打开就可以...

参与评论

您还未登录，请先

登录

后发表或查看评论

Vue 中 iconfont 使用

大灰狼的小绵羊哥哥的博客

10-16

6594

Vue 中 iconfont 使用

未能找到引用的组件_封装icon组件

weixin_39672443的博客

12-01

293

Icon是前端基础逼格的体现，开发中常用到的。这里推荐使用阿里的图标库。Iconfont-阿里巴巴矢量图标库​www.iconfont.cn一、阿里图标库使用先来快速入门阿里的图标库。先注册账号，搜索图标，找到自己需要的图标，鼠标放在该图标上，会显示三个选项，点击“购物车图标”，添加入库。如下图：点击购物车图标选择完需要的图标后，点击右上角的购物车图标，将所选的图标添加到自己的项目中，如下图： ...

这里推荐几个前端icon网站（动图网站）

T3165919332的博客

06-09

2509

它有不同的图标类别,其中“Animated Icons”类别下提供了丰富的动效图标,包括 SVG 动画和 Lottie 动画格式的图标。5. UniconsUnicons 是一个开源的、高质量的图标库,它提供超过 2000 个自定义图标,支持多种格式如 SVG、PNG、React、Vue 组件等。其中动效图标类型也很丰富,有加载、菜单、箭头等多种动画交互效果的图标。2. IconscoutIconscout 是一个高质量图标资源网站,里面提供了大量免费和高质量的 SVG 图标和动效图标。

前端自定义icon实现

m0_68935893的博客

08-01

87

【代码】前端自定义icon实现。

前端：常用图标大全

bocai_xiaodaidai的博客

10-18

8826

一、ionic icon(图标)

ionic 也默认提供了许多的图标，大概有 700 多个，针对 Android 和 iOS 有不同的样式。

Ionic icons 官网:http://ionicons.com/

菜鸟教程：https://www.runoob.com/ionic/ionic-icon.html

国内图标样式 CDN 地址：https://cdn.staticfile.o...

如何在前端项目中使用icon图标 （iconfont和remixicon以及Materialicon）

haodanzj的博客

06-20

1712

使用图标库的教程

HTML设置浏览器默认favicon.ico图标

weixin_43693072的博客

05-04

1399

有些业务场景需要不展示或者动态展示浏览器标签页图标，不展示时则使用浏览器默认的图标。（特别是之前设置过浏览器标签页图标，直接删除link标签是没用的）

前端引入icon的方法（iconfont,fontawesome）

weixin_43312391的博客

03-03

4046

前端项目中，经常需要从外引入一些icon图标到项目中，我经常使用的两个icon库就是Iconfont阿里巴巴矢量库，以及font-Awsome。接下来我稍微讲一下这两种的使用方法。

Iconfont阿里巴巴矢量库

font-Awsome Icon库

Iconfont阿里巴巴矢量库的使用

使用步骤：

1 进入网站之后，搜索想要的icon图标

2 选择所需要的所有icon添加入库，可以点击上方的库存，将所有icon添加到某个项目

3 在我的项目中，选择刚刚添加的项目，然后点击fontClass...

vue使用自定义icon图标的方法

08-27

主要介绍了vue使用自定义的icon图标的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

在Vue中使用icon 字体图标的方法

10-16

主要介绍了在Vue中使用icon 字体图标的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

开发常用图标Icon资源

04-02

开发常用图标资源5000个

Vue项目中如何引入icon图标

08-27

主要介绍了Vue如何引入icon图标,本文通过图文并茂的形式给大家介绍的非常详细，需要的朋友可以参考下

VS Code系列：（一）初识篇

热门推荐

Bumphy的博客

02-03

5万+

前置知识

本篇文章： vscode 的版本 1.19.2

安装系统：windows 7 64位

主要适用：web前端开发

简介

官方介绍

VisualStudioCode是一个轻量级且功能强大的源代码编辑器，它运行在桌面上，支持Windows、MacOS和Linux系统。它提供了对JavaScript、TypeScript和Node.js的内置支持，并为其他语言（如C、C#、J

命令行工具之Cmder：（1）入门篇

Bumphy的博客

02-08

1万+

前置知识

系统：windows7 64位

软件：Cmder

简介

cmder是windows下的命令行工具，用来替代windows自带的cmd。下载地址：http://cmder.net/ 。

总之，她很sexy！！！

安装与配置

（1）下载安装

-官方地址：http://cmder.net/

版本区别：

（2）环境配置

为什么要进行环境配置...

CSS实战样式：文字两侧加居中横线

Bumphy的博客

10-23

1万+

CSS实战样式：文字两侧加居中横线在日常的开发中，会遇到这样的需求

css绘制不规则图形

Bumphy的博客

12-16

5111

CSS绘制不规则图形

前端 icon图标大全

最新发布

08-24

在前端开发中，可以使用icon图标来增加网站的可视化效果和用户体验。前端icon图标大全指的是包含了各种常用图标的集合，供开发者选择和使用。这些图标通常以矢量格式（如SVG）提供，可以通过CSS样式或者直接嵌入到HTML中进行展示。

有一些在线工具提供了前端icon图标大全，可以根据开发需求进行搜索和下载。例如，引用中提到的在线图片转换ICO图标工具，可以将用户上传的图片进行裁剪、缩放和格式转换，最终生成符合要求的ico图标文件供用户下载。

此外，还有一些知名的前端图标库，如Font Awesome、Ionicons和Material Icons等，它们提供了丰富的图标集合，开发者可以通过引入对应的CSS或者JavaScript文件来使用这些图标。

总结来说，前端icon图标大全是一种包含了各种常用图标的集合，可以通过在线工具或者前端图标库进行获取和使用，以提升网站的视觉效果和用户交互体验。123

#### 引用[.reference_title]

- *1* *2* *3* [前端实现ICON图标生成器](https://blog.csdn.net/wh8383672/article/details/121975141)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]

[ .reference_list ]

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

非常没帮助

没帮助

一般

有帮助

非常有帮助

提交

Bumphy

CSDN认证博客专家

CSDN认证企业博客

码龄7年

暂无认证

28

原创

10万+

周排名

189万+

总排名

18万+

访问

等级

1088

积分

35

粉丝

36

获赞

16

评论

116

收藏

私信

关注

热门文章

如何提取网页中的blob加密视频

68537

VS Code系列：（一）初识篇

56638

命令行工具之Cmder：（1）入门篇

12464

CSS实战样式：文字两侧加居中横线

10221

css绘制不规则图形

5111

分类专栏

MySQL

1篇

数据库

1篇

殴打小盆友之JS系列

VUE开发系列：插件使用

前端

25篇

推荐书籍

1篇

个人随笔

3篇

编程工具

4篇

CSS布局

4篇

HTML

3篇

JS原生

8篇

译文

4篇

vue

1篇

PHP

React

Python

Node

1篇

JS专栏

2篇

IOS兼容

1篇

工具使用

2篇

图像

1篇

最新评论

nvm安装node版本成功，npm安装失败

CSDN-Ada助手:

非常感谢你分享这篇博客，安装node版本成功但npm安装失败是一个常见的问题，我建议你写一篇关于如何解决npm安装失败的技术文章。你可以分享一些常见的问题和解决方案，例如如何升级npm版本、如何清除npm缓存等。这样的技术文章对其他用户也会非常有帮助，相信会有更多读者受益于你的分享。加油写下一篇博客吧！

为了方便博主创作，提高生产力，CSDN上线了AI写作助手功能，就在创作编辑器右侧哦～（https://mp.csdn.net/edit?utm_source=blog_comment_recall ）诚邀您来加入测评，到此（https://activity.csdn.net/creatActivity?id=10450&utm_source=blog_comment_recall）发布测评文章即可获得「话题勋章」，同时还有机会拿定制奖牌。

如何提取网页中的blob加密视频

Blv:

感谢大佬，简单好用！

如何提取网页中的blob加密视频

Spark4J:

第一个要钱

如何提取网页中的blob加密视频

singlever:

爬p站还行

如何提取网页中的blob加密视频

中国之紫:

推荐一个 m3u8 网页版提取工具，支持解密，简单易用

工具链接：http://blog.luckly-mjw.cn/tool-show/m3u8-downloader/index.html

工具教程：https://segmentfault.com/a/1190000021847172?_ea=32289224

文采四溢，大佬这是被耽搁的文学家啊！

您愿意向朋友推荐“博客详情页”吗？

强烈不推荐

不推荐

一般般

推荐

强烈推荐

提交

最新文章

nvm安装node版本成功，npm安装失败

Windows10 下载安装MySQL8

1px边框问题

2022年1篇

2020年1篇

2019年2篇

2018年19篇

2017年12篇

目录

目录

分类专栏

MySQL

1篇

数据库

1篇

殴打小盆友之JS系列

VUE开发系列：插件使用

前端

25篇

推荐书籍

1篇

个人随笔

3篇

编程工具

4篇

CSS布局

4篇

HTML

3篇

JS原生

8篇

译文

4篇

vue

1篇

PHP

React

Python

Node

1篇

JS专栏

2篇

IOS兼容

1篇

工具使用

2篇

图像

1篇

目录

评论

被折叠的  条评论

为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

祝福语

请填写红包祝福语或标题

红包数量

个

红包个数最小为10个

红包总金额

元

红包金额最低5元

余额支付

当前余额3.43元

前往充值 >

需支付：10.00元

取消

确定

下一步

知道了

成就一亿技术人!

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

规则

hope_wisdom 发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额

0

抵扣说明：

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

余额充值

图标库 | Vue3-resource

图标库 | Vue3-resource

Skip to content Vue3-resourceSearchMetaKMain Navigation总览 web端 UI库开箱即用富文本编辑器markdown编辑器上传组件图片/背景组件音频/视频组件图标库图表组件拖拽组件配套资源文件组件动画库地图组件其他组件 移动端 UI库表单组件图片组件图表库开源项目滚动组件配套资源 小程序 框架UI库 文档&工具 文档工具vscode插件常用库学习&面试收藏githubAppearancegithubMenu Return to top Sidebar Navigation Web端UI库开箱即用富文本编辑器markdown编辑器上传组件图片/背景组件音频/视频组件图标库图表组件拖拽组件配套资源文件组件动画库地图组件其他组件On this page Table of Contents for current page IconboxIconParkBoxiconsUnplugin-iconsXiconsVue3-icon-picker图标库 #Iconbox #字节跳动 Iconbox 图标平台 有效管理团队图标库，开发者灵活调用资源地址 #官方文档：官方文档地址IconPark #2400+基础图标，29 种图标分类，提供更多的选择资源地址 #官方文档：官方文档地址仓库资源：github 地址Boxicons #高品质的网页图标，为设计师和开发人员精心制作的简单矢量图标资源地址 #官方文档：官方文档地址仓库资源：github 地址Unplugin-icons #超过 10,000 个图标、徽标、表情符号等资源地址 #官方文档：官方文档地址仓库资源：github 地址Xicons #包含 vicons（vue3），ricons（react），sicons（svg）和 v2icons(vue2)。 整合自 fluentui-system-icons、ionicons、ant-design-icons、material-design-icons、Font-Awesome tabler-icons 和 carbon 的 SVG Vue/React 组件。资源地址 #官方文档：官方文档地址仓库资源：github 地址图标预览：XiconsVue3-icon-picker #A fantastic icon picker for Vue3 projects资源地址 #官方文档：官方文档地址仓库资源：github 地址图标预览：Vue3-icon-picker 为此页提供修改建议Previous page音频/视频组件Next page图表组件Released under the MIT License.Copyright © hu-snail 2021-present vue3-resource

图标 Icon - Ant Design

图标 Icon - Ant Design

Enable JavaScript to run this app.

Ant Design⌘ K设计研发组件博客资源国内镜像5.15.3中En组件总览通用Button按钮FloatButton悬浮按钮NewIcon图标Typography排版布局Divider分割线Flex弹性布局NewGrid栅格Layout布局Space间距导航Anchor锚点Breadcrumb面包屑Dropdown下拉菜单Menu导航菜单Pagination分页Steps步骤条数据录入AutoComplete自动完成Cascader级联选择Checkbox多选框ColorPicker颜色选择器NewDatePicker日期选择框Form表单Input输入框InputNumber数字输入框Mentions提及Radio单选框Rate评分Select选择器Slider滑动输入条Switch开关TimePicker时间选择框Transfer穿梭框TreeSelect树选择Upload上传数据展示Avatar头像Badge徽标数Calendar日历Card卡片Carousel走马灯Collapse折叠面板Descriptions描述列表Empty空状态Image图片List列表Popover气泡卡片QRCode二维码NewSegmented分段控制器Statistic统计数值Table表格Tabs标签页Tag标签Timeline时间轴Tooltip文字提示Tour漫游式引导NewTree树形控件反馈Alert警告提示Drawer抽屉Message全局提示Modal对话框Notification通知提醒框Popconfirm气泡确认框Progress进度条Result结果Skeleton骨架屏Spin加载中Watermark水印New其他Affix固钉App包裹组件NewConfigProvider全局化配置Icon图标语义化的矢量图形。相关资源Ant Design ChartsAnt Design ProAnt Design Pro ComponentsAnt Design MobileAnt Design MiniAnt Design Landing-首页模板集Scaffolds-脚手架市场Umi-React 应用开发框架dumi-组件/文档研发工具qiankun-微前端框架ahooks-React Hooks 库Ant Motion-设计动效国内镜像站点 社区Awesome Ant DesignMediumTwitterAnt Design 语雀专栏Ant Design 知乎专栏体验科技专栏SEE Conf-蚂蚁体验科技大会加入我们帮助GitHub更新日志常见问题报告 Bug议题讨论区StackOverflowSegmentFault更多产品语雀-构建你的数字花园AntV-数据可视化解决方案Egg-企业级 Node.js 框架Kitchen-Sketch 工具集Galacean-互动图形解决方案蚂蚁体验科技主题编辑器Made with ❤ by蚂蚁集团和 Ant Design 开源社区使用方法使用图标组件，你需要安装 @ant-design/icons 图标组件包：npmyarnpnpmnpm install @ant-design/icons --save设计师专属安装 Kitchen Sketch 插件 ，就可以一键拖拽使用 Ant Design 和 Iconfont 的海量图标，还可以关联自有项目。图标列表线框风格实底风格双色风格方向性图标StepBackwardOutlinedStepForwardOutlinedFastBackwardOutlinedFastForwardOutlinedShrinkOutlinedArrowsAltOutlinedDownOutlinedUpOutlinedLeftOutlinedRightOutlinedCaretUpOutlinedCaretDownOutlinedCaretLeftOutlinedCaretRightOutlinedUpCircleOutlinedDownCircleOutlinedLeftCircleOutlinedRightCircleOutlinedDoubleRightOutlinedDoubleLeftOutlinedVerticalLeftOutlinedVerticalRightOutlinedVerticalAlignTopOutlinedVerticalAlignMiddleOutlinedVerticalAlignBottomOutlinedForwardOutlinedBackwardOutlinedRollbackOutlinedEnterOutlinedRetweetOutlinedSwapOutlinedSwapLeftOutlinedSwapRightOutlinedArrowUpOutlinedArrowDownOutlinedArrowLeftOutlinedArrowRightOutlinedPlayCircleOutlinedUpSquareOutlinedDownSquareOutlinedLeftSquareOutlinedRightSquareOutlinedLoginOutlinedLogoutOutlinedMenuFoldOutlinedMenuUnfoldOutlinedBorderBottomOutlinedBorderHorizontalOutlinedBorderInnerOutlinedBorderOuterOutlinedBorderLeftOutlinedBorderRightOutlinedBorderTopOutlinedBorderVerticleOutlinedPicCenterOutlinedPicLeftOutlinedPicRightOutlinedRadiusBottomleftOutlinedRadiusBottomrightOutlinedRadiusUpleftOutlinedRadiusUprightOutlinedFullscreenOutlinedFullscreenExitOutlined提示建议性图标QuestionOutlinedQuestionCircleOutlinedPlusOutlinedPlusCircleOutlinedPauseOutlinedPauseCircleOutlinedMinusOutlinedMinusCircleOutlinedPlusSquareOutlinedMinusSquareOutlinedInfoOutlinedInfoCircleOutlinedExclamationOutlinedExclamationCircleOutlinedCloseOutlinedCloseCircleOutlinedCloseSquareOutlinedCheckOutlinedCheckCircleOutlinedCheckSquareOutlinedClockCircleOutlinedWarningOutlinedIssuesCloseOutlinedStopOutlined编辑类图标EditOutlinedFormOutlinedCopyOutlinedScissorOutlinedDeleteOutlinedSnippetsOutlinedDiffOutlinedHighlightOutlinedAlignCenterOutlinedAlignLeftOutlinedAlignRightOutlinedBgColorsOutlinedBoldOutlinedItalicOutlinedUnderlineOutlinedStrikethroughOutlinedRedoOutlinedUndoOutlinedZoomInOutlinedZoomOutOutlinedFontColorsOutlinedFontSizeOutlinedLineHeightOutlinedDashOutlinedSmallDashOutlinedSortAscendingOutlinedSortDescendingOutlinedDragOutlinedOrderedListOutlinedUnorderedListOutlinedRadiusSettingOutlinedColumnWidthOutlinedColumnHeightOutlined数据类图标AreaChartOutlinedPieChartOutlinedBarChartOutlinedDotChartOutlinedLineChartOutlinedRadarChartOutlinedHeatMapOutlinedFallOutlinedRiseOutlinedStockOutlinedBoxPlotOutlinedFundOutlinedSlidersOutlined品牌和标识AndroidOutlinedAppleOutlinedWindowsOutlinedIeOutlinedChromeOutlinedGithubOutlinedAliwangwangOutlinedDingdingOutlinedWeiboSquareOutlinedWeiboCircleOutlinedTaobaoCircleOutlinedHtml5OutlinedWeiboOutlinedTwitterOutlinedWechatOutlinedWhatsAppOutlinedYoutubeOutlinedAlipayCircleOutlinedTaobaoOutlinedDingtalkOutlinedSkypeOutlinedQqOutlinedMediumWorkmarkOutlinedGitlabOutlinedMediumOutlinedLinkedinOutlinedGooglePlusOutlinedDropboxOutlinedFacebookOutlinedCodepenOutlinedCodeSandboxOutlinedAmazonOutlinedGoogleOutlinedCodepenCircleOutlinedAlipayOutlinedAntDesignOutlinedAntCloudOutlinedAliyunOutlinedZhihuOutlinedSlackOutlinedSlackSquareOutlinedBehanceOutlinedBehanceSquareOutlinedDribbbleOutlinedDribbbleSquareOutlinedInstagramOutlinedYuqueOutlinedAlibabaOutlinedYahooOutlinedRedditOutlinedSketchOutlinedWechatWorkOutlinedOpenAIOutlinedDiscordOutlinedXOutlinedBilibiliOutlinedPinterestOutlinedTikTokOutlinedSpotifyOutlinedTwitchOutlinedLinuxOutlinedJavaOutlinedJavaScriptOutlinedPythonOutlinedRubyOutlinedDotNetOutlinedKubernetesOutlinedDockerOutlinedBaiduOutlinedHarmonyOSOutlined网站通用图标AccountBookOutlinedAimOutlinedAlertOutlinedApartmentOutlinedApiOutlinedAppstoreAddOutlinedAppstoreOutlinedAudioOutlinedAudioMutedOutlinedAuditOutlinedBankOutlinedBarcodeOutlinedBarsOutlinedBellOutlinedBlockOutlinedBookOutlinedBorderOutlinedBorderlessTableOutlinedBranchesOutlinedBugOutlinedBuildOutlinedBulbOutlinedCalculatorOutlinedCalendarOutlinedCameraOutlinedCarOutlinedCarryOutOutlinedCiCircleOutlinedCiOutlinedClearOutlinedCloudDownloadOutlinedCloudOutlinedCloudServerOutlinedCloudSyncOutlinedCloudUploadOutlinedClusterOutlinedCodeOutlinedCoffeeOutlinedCommentOutlinedCompassOutlinedCompressOutlinedConsoleSqlOutlinedContactsOutlinedContainerOutlinedControlOutlinedCopyrightOutlinedCreditCardOutlinedCrownOutlinedCustomerServiceOutlinedDashboardOutlinedDatabaseOutlinedDeleteColumnOutlinedDeleteRowOutlinedDeliveredProcedureOutlinedDeploymentUnitOutlinedDesktopOutlinedDisconnectOutlinedDislikeOutlinedDollarOutlinedDownloadOutlinedEllipsisOutlinedEnvironmentOutlinedEuroCircleOutlinedEuroOutlinedExceptionOutlinedExpandAltOutlinedExpandOutlinedExperimentOutlinedExportOutlinedEyeOutlinedEyeInvisibleOutlinedFieldBinaryOutlinedFieldNumberOutlinedFieldStringOutlinedFieldTimeOutlinedFileAddOutlinedFileDoneOutlinedFileExcelOutlinedFileExclamationOutlinedFileOutlinedFileGifOutlinedFileImageOutlinedFileJpgOutlinedFileMarkdownOutlinedFilePdfOutlinedFilePptOutlinedFileProtectOutlinedFileSearchOutlinedFileSyncOutlinedFileTextOutlinedFileUnknownOutlinedFileWordOutlinedFileZipOutlinedFilterOutlinedFireOutlinedFlagOutlinedFolderAddOutlinedFolderOutlinedFolderOpenOutlinedFolderViewOutlinedForkOutlinedFormatPainterOutlinedFrownOutlinedFunctionOutlinedFundProjectionScreenOutlinedFundViewOutlinedFunnelPlotOutlinedGatewayOutlinedGifOutlinedGiftOutlinedGlobalOutlinedGoldOutlinedGroupOutlinedHddOutlinedHeartOutlinedHistoryOutlinedHolderOutlinedHomeOutlinedHourglassOutlinedIdcardOutlinedImportOutlinedInboxOutlinedInsertRowAboveOutlinedInsertRowBelowOutlinedInsertRowLeftOutlinedInsertRowRightOutlinedInsuranceOutlinedInteractionOutlinedKeyOutlinedLaptopOutlinedLayoutOutlinedLikeOutlinedLineOutlinedLinkOutlinedLoading3QuartersOutlinedLoadingOutlinedLockOutlinedMacCommandOutlinedMailOutlinedManOutlinedMedicineBoxOutlinedMehOutlinedMenuOutlinedMergeCellsOutlinedMergeOutlinedMessageOutlinedMobileOutlinedMoneyCollectOutlinedMonitorOutlinedMoonOutlinedMoreOutlinedMutedOutlinedNodeCollapseOutlinedNodeExpandOutlinedNodeIndexOutlinedNotificationOutlinedNumberOutlinedOneToOneOutlinedPaperClipOutlinedPartitionOutlinedPayCircleOutlinedPercentageOutlinedPhoneOutlinedPictureOutlinedPlaySquareOutlinedPoundCircleOutlinedPoundOutlinedPoweroffOutlinedPrinterOutlinedProductOutlinedProfileOutlinedProjectOutlinedPropertySafetyOutlinedPullRequestOutlinedPushpinOutlinedQrcodeOutlinedReadOutlinedReconciliationOutlinedRedEnvelopeOutlinedReloadOutlinedRestOutlinedRobotOutlinedRocketOutlinedRotateLeftOutlinedRotateRightOutlinedSafetyCertificateOutlinedSafetyOutlinedSaveOutlinedScanOutlinedScheduleOutlinedSearchOutlinedSecurityScanOutlinedSelectOutlinedSendOutlinedSettingOutlinedShakeOutlinedShareAltOutlinedShopOutlinedShoppingCartOutlinedShoppingOutlinedSignatureOutlinedSisternodeOutlinedSkinOutlinedSmileOutlinedSolutionOutlinedSoundOutlinedSplitCellsOutlinedStarOutlinedSubnodeOutlinedSunOutlinedSwitcherOutlinedSyncOutlinedTableOutlinedTabletOutlinedTagOutlinedTagsOutlinedTeamOutlinedThunderboltOutlinedToTopOutlinedToolOutlinedTrademarkCircleOutlinedTrademarkOutlinedTransactionOutlinedTranslationOutlinedTrophyOutlinedTruckOutlinedUngroupOutlinedUnlockOutlinedUploadOutlinedUsbOutlinedUserAddOutlinedUserDeleteOutlinedUserOutlinedUserSwitchOutlinedUsergroupAddOutlinedUsergroupDeleteOutlinedVerifiedOutlinedVideoCameraAddOutlinedVideoCameraOutlinedWalletOutlinedWifiOutlinedWomanOutlined代码演示基本用法通过 @ant-design/icons 引用 Icon 组件，不同主题的 Icon 组件名为图标名加主题做为后缀，也可以通过设置 spin 属性来实现动画旋转效果。自定义图标利用 Icon 组件封装一个可复用的自定义图标。可以通过 component 属性传入一个组件来渲染最终的图标，以满足特定的需求。使用 iconfont.cn 的多个资源@ant-design/icons@4.1.0 以后，scriptUrl 可引用多个资源，用户可灵活的管理 iconfont.cn 图标。如果资源的图标出现重名，会按照数组顺序进行覆盖。多色图标双色图标可以通过 twoToneColor 属性设置主题色。使用 iconfont.cn对于使用 iconfont.cn 的用户，通过设置 createFromIconfontCN 方法参数对象中的 scriptUrl 字段， 即可轻松地使用已有项目中的图标。API从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。通用图标参数说明类型默认值版本className设置图标的样式名string-rotate图标旋转角度（IE9 无效）number-spin是否有旋转动画booleanfalsestyle设置图标的样式，例如 fontSize 和 colorCSSProperties-twoToneColor仅适用双色图标。设置双色图标的主要颜色string (十六进制颜色)-其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';

自定义 Icon参数说明类型默认值版本component控制如何渲染图标，通常是一个渲染根标签为

;

双色图标主色对于双色图标，可以通过使用 getTwoToneColor() 和 setTwoToneColor(colorString) 来全局设置图标主色。import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';

setTwoToneColor('#eb2f96');getTwoToneColor(); // #eb2f96

自定义 font 图标在 3.9.0 之后，我们提供了一个 createFromIconfontCN 方法，方便开发者调用在 iconfont.cn 上自行管理的图标。import React from 'react';import { createFromIconfontCN } from '@ant-design/icons';import ReactDOM from 'react-dom/client';

const MyIcon = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成});

ReactDOM.createRoot(mountNode).render();

其本质上是创建了一个使用 标签来渲染图标的组件。options 的配置项如下：参数说明类型默认值版本extraCommonProps给所有的 svg 图标 组件设置额外的属性{ [key: string]: any }{}scriptUrliconfont.cn 项目在线生成的 js 地址，@ant-design/icons@4.1.0 之后支持 string[] 类型string | string[]-在 scriptUrl 都设置有效的情况下，组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集，无需手动引入。见 iconfont.cn 使用帮助 查看如何生成 js 地址。自定义 SVG 图标如果使用 webpack，可以通过配置 @svgr/webpack 来将 svg 图标作为 React 组件导入。@svgr/webpack 的 options 选项请参阅 svgr 文档。// webpack.config.jsmodule.exports = { // ... other config test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'babel-loader', }, { loader: '@svgr/webpack', options: { babel: false, icon: true, }, }, ],};

import React from 'react';import Icon from '@ant-design/icons';import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径import ReactDOM from 'react-dom/client';

// in create-react-app:// import { ReactComponent as MessageSvg } from 'path/to/message.svg';

ReactDOM.createRoot(mountNode).render();

Icon 中的 component 组件的接受的属性如下：字段说明类型只读值版本className计算后的 svg 类名string-fillsvg 元素填充的颜色stringcurrentColorheightsvg 元素高度string | number1emstyle计算后的 svg 元素样式CSSProperties-widthsvg 元素宽度string | number1em主题变量（Design Tok

适合前端开发 和UI 设计的20多个最佳 ICON 库-腾讯云开发者社区-腾讯云

译者：前端小智

来源：flatlogic 在应用界面中图标的存在，会给用户一个良好第一印象，这个挺重要的。但是从零开始开发图标需要大量的时间和金钱。在你的网站上使用图标可以让你有效地与你的访问者交流:它们增加了可读性，突出了重要的内容，加强了功能或特性，增强了设计。因此，使用现成图标是很好的一个选择。最佳图标库的列表Flaticon网址：https://www.flaticon.com/packs

格式和类型：PNG, SVG, EPS, PSD, and BASE 64, Marketplace

价格和许可证：有限的免费套餐和高级套餐，每月9.99美元起Flaticon 包含完全可编辑的矢量，可用于个人和商业项目。FlatIcon 拥有超过230万个向量图标，它们被分组到51202个包中该产品有 Adobe 扩展，允许我们轻松导入Photoshop, Illustrator和After Effects中的图标。如果希望使用web字体而不是静态文件来显示图标，那么FlatIcon 将负责格式转换并生成一个可以使用的 web 字体。我们还可以自定义下载的图标。亮点：超过90,000个图标；SVG，EPS，PSD 和 PNG 格式；图标字体;用于 CC 套件的 Adobe 扩展;带高级期权的 Linkshare 许可证;并且每个月都会添加新的图标包;Jam Icons网址：https://jam-icons.com/

格式和类型： SVG, CSS

价格和许可证：Free, MITJam 图标是一套896个手工制作的图标。这个图标包提供了SVG和字体版本。这些图标可以用作web、打印或应用程序开发项目中的SVG文件。这些图标也可以用作给定CSS样式表的字体。有16px、24px和32px三种尺寸。我们还可以选择填充或描边图标。Fontisto Icon Pack网址：https://fontisto.com/

格式和类型： CSS

价格和许可证：ree, MITFontisto 是矢量图标包。 可以立即自定义图标：大小，颜色，阴影以及 CSS 可以完成的所有操作。 该产品不需要 Javascript。 Fontisto 图标是矢量，这意味着它们在高分辨率显示器上看起来会很好。在该网站上，我们可以找到有关如何启动和自定义产品的完整文档和各种指南。 我们只需将链接粘贴到网站上即可开始使用该产品。 此外，还可以将 Fontisto 与适合的软件包管理器一起使用：npm，yarn，bower等。Iconmonstr网址：https://iconmonstr.com/

格式和类型：SVG, EPS, PSD and PNG, Marketplace

价格和许可证：FreeIconmonstr 的图标集合中有4400多个图标。 每个图标集都提供图形的轮廓和填充版本，以确保它们可用于各种设计应用程序。 该网站上的每个图标都是免费提供的，并且图标文件采用SVG，AI，PSD和PNG等格式，这些文件可用于免费和商业目的。Iconmonstr通过其强大的搜索功能使搜索图标变得简单。 我们还可以将自己喜欢的图标保存在个人收藏夹中，以备将来使用。亮点：免费使用所有图标四种格式的下载选项，以及专为网络使用而优化的缩小图标Pixsellz Material Icons Library网址：https://icons.pixsellz.io/

格式和类型： SVG, EPS, PSD, PNG, FIG, Material design

价格和许可证：Free，Apache License Version 2.0大量的1000多个图标分为16个不同类别。 免费的图标包灵感来自Material设计，并以三种不同的视觉风格呈现-圆形，轮廓和两色。 该套件有请输入代码6种不同的文件格式，因此我们可以使用首选设计软件中的图标。亮点：3 种风格Figma 风格1000多个图标24×24 像素素描风格16个类别，以及6 种文件格式Entypo网址：http://www.entypo.com/

格式和类型： SVG

价格和许可证：Free, Creative Common License 4.0Entypo是 svg 图标系列产品，几年前由瑞典的 Daniel Bruce 精心制作而成。 这些图标非常棒：在赠品方面，它们是最重要的。 该产品以 SVG 形式提供，带有411个图标，免费提供知识共享许可。Evil Icons网址：https://evil-icons.io/

格式和类型： SVG, Sketch

价格和许可证：Free, MIT这个库很大包含所有内容-包括SVG和原始源文件。 这意味着我们可以下载SVG以及Illustrator文件和Sketch的.sketch文件。　Streamline Icons网址：https://streamlineicons.com/

格式和类型： ICONJAR, SKETCH, FIG, XD, SVG, AI, PDF, PNG

价格和许可证：免费到　$411Streamline Icons是一个兼容性强的免费图标库存。 该库按｀53｀个类别进行组织，带有30000多个矢量图标。这是为 Sketch 优化的少数几个图标包之一，可轻松操纵笔触宽度和颜色。 诸如symbols 和共享样式之类的内置 Sketch 功能使重复使用元素（如图标）变得快速，容易。该公司拥有自己的 Web 应用程序，可帮助直接从浏览器浏览，搜索和下载图标。亮点：超过30000个矢量图标智能笔触修改轮廓厚度支持 Sketch, AI, EPS, PDF, PNG, SVG 格式Streamline 3.0 中的每个图标都有三个唯一的权重：浅色，常规和粗体Smashicons网址：https://smashicons.com/

格式和类型： JAR, SVG, AI, SKETCH, Marketplace

价格和许可证：免费到　$149Smashicons 在其库中提供了超过219000+个图标的全面图标集合。 Smashicons 的工作方式与其他产品略有不同：其定价基于每月5美元的月度计划。 这意味着您每月只需支付5美元，就可以访问他们现有图标的整个集合以及他们发布的任何将来的图标。亮点：一个非常大的图标集合有图标都兼容多平台易于使用的网络应用程序来搜索和找到你需要的图标基于订阅的业务模型多平台支持Icons8网址：https://icons8.com/

格式和类型：SVG, PNG, PDF

价格和许可证：Good Boy License, 免费到　$19.90Icons8 中的图标集带有超过120000个图标，涵盖多个类别。 从企业和办公室设置到人，食物和社交媒体图标。 这些图标旨在模仿特定操作系统的外观。 我们可以在Windows，iOS 和 Android 版本中下载它们。亮点：SVG、PNG 和 HTML 格式提供各种样式的图标，例如线性图标，实心图标和全彩色所有图标都可以通过.zip文件下载下载前可编辑免费和付费订阅选项Icomoon网址：https://icomoon.io/

格式和类型：SVG, PNG, PDF

价格和许可证：免费到　$139.90Icomoon 是用于图像和图标管理的完整工具。 该产品具有用于编辑和管理图标的高质量解决方案。 Icomoon 图标是在16X16网格上手工制作的，并提供SVG，EPS，PSD，PDF和AI格式。 图标集也由其创建者不断更新。每个图标包都有详细的授权许可，这样设计人员和开发人员就可以确切地知道如何使用图标。用户还可以定制自己的图标字体。亮点：综合图标管理工具免费和付费下载选项多种下载格式Glyphish Icon Pack网址：http://www.glyphish.com/

格式和类型：SVG, PNG, PDF, PSD, Glyph, Icon font

价格和许可证： Creative Common Attribution， 从25美元到99美元Glyphish提供了各种不同的图标库。 每个库都有各种不同的格式，包括PNG，SVG，PSD和AI。 基本图标的价格为25美元，而最终的图标包的正常价格为99美元。 免费演示包含50个图标。 设计人员可以轻松编辑所有图标。亮点：多个平台的图标：iOS，Android，Web，Window一组50个免费图标轻松拖放到Xcode中适用于Apple Retina显示屏的图标Ionicons网址：https://ionicons.com/

格式和类型： SVG and Webfont, Icon font

价格和许可证： MITIonic 小组决定以称为Ionicons的网络字体的形式发布其图标。 自然，它们是完全免费的，并且可以在GitHub上使用。 我们甚至可以使用CDN版本的样式表将这些图标直接添加到的站点中，它也支持 SVG 和 Web 字体。亮点：完全免费通过复制和粘贴链接轻松设置以网络字体的形式出现定制尺寸超过1100个项目Angular Material Icons网址：https://material.io/resources...

格式和类型： SVG, Webfont, Material design

价格和许可证：Free, Apache License 2.0Material Icon 是Google提供的免费图标库。 为了确保可读性和清晰度，这些图标已进行了优化，以在所有平台和显示器上看起来都很好。 这些图标是完全免费的，可以在GitHub上访问。 这个图标库很大，有超过1,000个图标涵盖了广泛的界面功能。Linearicons网址：https://linearicons.com/

格式和类型： SVG, Webfont, Icon font

价格和许可证：免费到59美元，Common Creative LicenseLinearicons是用于个人或商业目的的最受欢迎和最佳图标包之一。 Linearicons 有有免费和高级版本，此惊人的图标包的免费版本已获得Creative Common许可。 我们还可以根据需要选择其他软件包，例如“桌面软件包”。亮点：CloudFront CDN提供免费版本带有不同的格式：SVG，PDF，Webfont。Feathericons网址：https://feathericons.com/

格式和类型： SVG, Webfont, Iconfont

价格和许可证：Free, MIT LicenseFeather是最受欢迎的开源图标集之一。 这些是在24X24网格上设计的开源图标。 这些图标以SVG格式提供。 它已获得MIT许可，并且在开源中大约有250多个图标。这些图标很容易编辑，无论大小都很清晰。它们首先被设计成一种图标字体，所以它是作为一种web字体嵌入的。Iconfinder网址https://www.iconfinder.com/

格式和类型：SVG, PNG, ICO, Marketplace

价格和许可证：每月9美元至49美元Iconfinder是网络上最受欢迎的图标资源之一。 它提供了超过400万个图标，为用户提供了各种搜索选项，包括图标格式，价格，大小，背景等。还有多个月度付款计划-从$9到$49。 我们也可以选择“随用随付”系统。图标文件提供SVG，PNG，ICO，ICNS和Adobe Illustrator格式，尺寸范围为16×16到512×512。 如果找不到自己喜欢的东西，或者只是想要专门为我们品牌设计的自定义图标，也可以与网站上的一些最佳设计师合作。亮点：免费和付费使用选项灵活的搜索功能提供多种格式的图标很多类别和样式标编辑器The Noun Project网址：https://thenounproject.com/

格式和类型：SVG, PNG, Marketplace

价格和许可证：Creative Commons LicenseNoun Project 提供了网络上最大的图标库之一。 该网站的大多数图标都以SVG和PNG格式以及黑白样式提供。该网站的库由各种独立设计师设计的图标文件组成。 在这里，创作者和创意专业人士可以合作销售他们的设计，并找到看似无穷无尽的高级图标库。搜索这个庞大而全面的图标库非常容易。 该图标库的其他主要功能包括免费和高级下载选项，许多大型图标集，适用于Mac的应用程序等等。 该图标库会定期更新，并且每天都会发布新的图标和集。亮点：超过150,000个图标SVG, PNG格式搜索和发现工具免费和付费下载选项几乎每天都会上传新图标Fontawesome Icons网址：https://fontawesome.com/icons

格式和类型：SVG, PNG, Icon font, Marketplace

价格和许可证：SIL OFL 1.1Font Awesome是周围使用最广泛，最受欢迎的图标字体。 这也是在引导时为团队设置的默认图标。 它还可以作为SVG图标以及其他格式使用。该许可证对任何商业或个人用途都是免费的。每个图标都是完全可伸缩的，并且可以直接在CSS中维护。 我们可以使用纯CSS3更改颜色，阴影，背景渐变以及几乎所有其他内容。 使用此库的另一个原因是，它已完全优化，并且完全不需要JavaScript，因此没有兼容性问题。亮点：矢量字体每个图标都带有CSS类和Unicode免费考虑到可访问性而构建易于跨网站升级提供整个图标库的桌面备忘单Lineicons网址：https://lineicons.com/

格式和类型：SVG, Web font, Icon fontace

价格和许可证：免费LineIcons 还提供带有清晰文档的免费CDN，使其易于入门。该图标包是完全免费的，并带有450多个线型图标。 它涵盖了来自不同类别的项目所需的每个基本图标。 LineIcons 还提供免费的CDN和清晰的文档，以轻松上手。 它带有2个不同的可伸缩软件包–可以根据项目需要使用WebFonts和SVG文件。亮点：450+个免费图标SVG文件免费CDN总结选择图标库时不应该是基于图标库受欢迎的程度，而是哪个图标库更适合当前的开发项目，哪个图标库的风格更符合我们应用程序的风格。希望本文有助于选择最适合你需要的解决方案。本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。如有侵权请联系 cloudcommunity@tencent.com 删除前往查看svghttps网络安全网站css本文分享自 作者个人站点/博客 前往查看如有侵权，请联系 cloudcommunity@tencent.com 删除。本文参与 腾讯云自媒体分享计划  ，欢迎热爱写作的你一起参与！svghttps网络安全网站css评论登录后参与评论0 条评论热度最新登录 后参与评论推荐阅读LV.关注文章0获赞0目录最佳图标库的列表FlaticonJam IconsFontisto Icon PackIconmonstrPixsellz Material Icons LibraryEntypoEvil Icons　Streamline IconsSmashiconsIcons8IcomoonGlyphish Icon PackIoniconsAngular Material IconsLineariconsFeathericonsIconfinderThe Noun ProjectFontawesome IconsLineicons总结相关产品与服务内容分发网络 CDN内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。免费体验产品介绍产品文档CDN 境内流量包 1元起 ，更有新老同享套餐包0.09元/GB起，立即选购

领券社区专栏文章阅读清单互动问答技术沙龙技术视频团队主页腾讯云TI平台活动自媒体分享计划邀请作者入驻自荐上首页技术竞赛资源技术周刊社区标签开发者手册开发者实验室关于社区规范免责声明联系我们友情链接腾讯云开发者扫码关注腾讯云开发者领取腾讯云代金券热门产品域名注册云服务器区块链服务消息队列网络加速云数据库域名解析云存储视频直播热门推荐人脸识别腾讯会议企业云CDN加速视频通话图像分析MySQL 数据库SSL 证书语音识别更多推荐数据安全负载均衡短信文字识别云点播商标注册小程序开发网站监控数据迁移Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档Copyright © 2013 - 2024 Tencent Cloud.All Rights Reserved. 腾讯云 版权所有登录 后参与评论00

在网页中使用 icon 字体图标 | 前端开发 - 知乎

在网页中使用 icon 字体图标 | 前端开发 - 知乎首发于效率工具指南切换模式写文章登录/注册在网页中使用 icon 字体图标 | 前端开发彭宏豪本文首发于我的个人号「效率工具指南」最近在 B 站上看 Pink 老师的前端视频，简单总结一下在网页中使用 icon 图标的两种方法。 直接插入字体图标这里说的字体图标，是指既有普通 icon 图标的外观，又带有字体特征的图标，可以像调整字体那样、调整图标的大小和颜色，且图标放大之后不会失真变模糊。 我们一般是从网上下载字体图标的，譬如国内的阿里巴巴旗下的矢量素材网站 iconfont、国外的 IcoMoon 等。去年写过一篇文章《微信小程序开发 | 如何在小程序中使用自定义 icon 图标》，其中介绍了 iconfont 图标的使用，这回介绍一下使用来自 IcoMoon 的图标的方法。 打开 IcoMoon 图标官网，从中挑选你想使用的 icon 图标，底部的 Selection 会统计你选中的图标数量，选好图标之后，点击右下角的 Generate Font，生成字体图标。在打开的页面，会显示我们刚才挑选的所有 icon 图标，并且提供图标的 unicode 编码，这些编码等下要用到，但现在先不管。点击右下角的 Download，下载生成的字体图标文件。 IcoMoon 图标下载：https://icomoon.io/app/#/select 解压下载的压缩文件，其中包含下面这些文件，我们需要用到其中的 fonts 文件夹。fonts 文件中包含了 4 个字体文件，这是因为不同浏览器所支持的字体格式是不一样的，考虑到兼容性，fonts 文件夹就包含了主流浏览器支持的字体文件： TrueType 字体(.ttf)：是 Windows 和 Mac 最常见的字体Web Open Font Format 字体(.woff)：支持的浏览器有 IE 9+、Firefox 3.5+、Chrome 6+、Safari 3.6+、Opera 11.1+Embedded Open Type 字体(.eot)：是 IE 专用的字体，支持的浏览器有 IE 4+ SVG 字体(.svg)：是基于 SVG 字体渲染的一种格式，支持的浏览器有 Chrome 4+、Safari 3.1+、Opera 10.0+、iOS Mobile Safari 3.2+将 fonts 文件夹复制到网页的项目文件夹 中，譬如放在与 index.html 文件同级的路径下。打开 HTML 文件，在 style 标签中粘贴下方的代码，定义我们等下需要用到的字体 icomoon。需要注意的是，如果 fonts 文件与 html 文件在同个路径下，就不需要修改下方代码中的 url 地址。粘贴代码之后，先来看一下我们最终想要实现的效果，如下图，下方的红色爱心❤️图标，就是前面说到的字体图标。根据最终想要实现的效果，我们要去到 html 文件中书写相应的代码。在 html 文件的 body 标签中输入下方的一行代码，中间的 span 标签包含的方块，其实就是爱心图标，只不过它无法在 html 文件中正常显示。

我  你

我你

font-family: 'icomoon';

}此时在浏览器中重新打开 html 文件，我们所使用的字体图标就会正常显示了。如果你还想调整字体图标的大小和颜色，可以在 CSS 中增加另外两个属性：font-size 和 color。css：p span {

font-family: 'icomoon';

font-size: 50px;

color: red;

}一番设置之后，重新在浏览器中刷新页面，就可以看到最终的效果啦。通过伪类选择器使用字体图标前面介绍的第一种方法，需要同时在 body 标签(html) 和 style 标签(css) 中同时书写相关的代码，如果我们想让 html 文件的结构更加简单，我们可以通过第二种方法——在 style 标签(css) 中通过伪类选择器使用字体图标，这样就只需要在 style 标签或 css 文件中书写相关的代码。 先来看一下我们最终想要实现的效果，如下图所示，给输入框的右侧添加一个向下的小三角 图标。想制作这个效果，同样是先从前面介绍的 IcoMoon 网站下载字体图标，将解压后的文件中的 fonts 文件夹放到与 index.html 同级的路径下，接着在 html 的 style 标签中粘贴下方的代码：在 html 的 body 标签中插入一个空白的盒子 div 标签：

接着在 style 标签中，给 div 盒子设置宽度、高度，并给它设置一个粗细为 1 px 的灰色边框：

此时在浏览器中打开 html 文件，就可以看到下图所示的孤零零的输入框。接着继续给这个输入框「添砖加瓦」——添加一个向下的小三角 ，继续在 style 标签中书写代码：div::after {

content: '';

font-family: 'icomoon';

}稍微解释一下这个代码，在 div 后面加上两个英文中的冒号，并且跟上单词 after 或者 before，就是所谓的伪类选择器，在我目前的认知范围内，伪类选择器就是用 css 代码来给 html 页面添加额外的元素，我们也确实可以在网页中看到添加的小三角，如下图。但这段代码是写在 css 而非 html 文件中，一定程度上可以简化 html 文件的代码。到这里，我们就顺利地在 html 页面中添加了字体图标，值得一提的是，伪类选择器中 content 属性的值，除了可以是字体图标对应的方块字符，还可以是字体图标下方的编号。以下图为例，爱心图标的编号是 e9da，因此 content 属性的值也可以是 \e9da ，通过编号来调用字体图标的时候，需要在编号的最前面加多一个反斜杆 \ 。div::after {

content: '\e9da';

font-family: 'icomoon';

}引入字体图标之后，字体图标默认位于输入框的左上角，为了将字体图标移动到右侧居中的位置，这里还需要用到另外的知识——定位，包含相对定位和绝对定位。关于定位的知识，这里暂时就不过多展开了，可以记住一个口诀「子绝父相」，即子元素设置绝对定位，父元素设置相对定位，就可以达到自由移动下拉小三角位置的目的。分别给 div 和伪元素选择器 div::after 添加另外的样式：div {

position: relative;

}

div::after {

position: absolute;

top: 12px;

right: 10px;

}这里的 top 和 right 属性的值，并不是唯一的，需要根据实际情况，配合浏览器的开发者工具进行调整，最终得到看起来比较舒适的值（主要就是调整到小三角可以位于输入框水平居中的位置），最终效果如下。以上，就是本次想和你分享的内容。希望对有需要的朋友有帮助。发布于 2021-09-19 08:13字体前端开发网页设计​赞同 5​​5 条评论​分享​喜欢​收藏​申请转载​文章被以下专栏收录效率工具指南公主号同专栏名，欢