imtoken苹果下载官网|icon 标签
作者： imtoken苹果下载官网
2024-03-14 13:03:42
ionic icon(图标) | 菜鸟教程
ionic icon(图标) | 菜鸟教程
菜鸟教程 -- 学的不仅是技术，更是梦想！
首页
HTML
CSS
JavaScript
Vue
Bootstrap
NodeJS
Python3
Python2
Java
C
C++
C#
Go
SQL
Linux
jQuery
本地书签
首页
HTML
CSS
JS
本地书签
Search
Python3 教程
Python2 教程
Vue3 教程
vue2 教程
Bootstrap3 教程
Bootstrap4 教程
Bootstrap5 教程
Bootstrap2 教程
ionic 教程
ionic 教程
ionic 安装
ionic 创建 APP
ionic CSS
ionic 头部与底部
ionic 按钮
ionic 列表
ionic 卡片
ionic 表单和输入框
ionic toggle
ionic checkbox
ionic 单选框
ionic range
ionic select
ionic tab(选项卡)
ionic 网格(Grid)
ionic 颜色
ionic icon(图标)
ionic JavaScript
ionic 上拉菜单
ionic 背景层
ionic 下拉刷新
ionic 复选框
ionic 单选框操作
ionic 切换开关操作
ionic 手势事件
ionic 头部和底部
ionic 列表操作
ionic 加载动作
ionic 模态窗口
ionic 导航
ionic 平台
ionic 浮动框
ionic 对话框
ionic 滚动条
ionic 侧栏菜单
ionic 滑动框
ionic 加载动画
ionic 选项卡栏操作
ionic 颜色
ionic 上拉菜单(ActionSheet)
ionic icon(图标)
ionic 也默认提供了许多的图标，大概有 700 多个，针对 Android 和 iOS 有不同的样式。
Ionic icons 官网: http://ionicons.com/
国内图标样式 CDN 地址：https://cdn.staticfile.net/ionicons/2.0.1/css/ionicons.min.css。
用法也非常的简单，由一个 icon 类及指定图标类组成，如：
实例
尝试一下 »
我们可以通过 font-size 来设置图片的大小：
实例
.icon {
font-size: 50px;
}
尝试一下 »
默认图标按钮：
代码图标
iOS 风格图标
代码图标
gt;
Android 风格图标
CodeResult
ionic 颜色
ionic 上拉菜单(ActionSheet)
点我分享笔记
取消
分享笔记
昵称昵称 (必填)
邮箱邮箱 (必填)
引用地址引用地址
分类导航
HTML / CSSHTML 教程HTML5 教程CSS 教程CSS3 教程Bootstrap3 教程Bootstrap4 教程Bootstrap5 教程Font Awesome 教程Foundation 教程 JavaScriptJavaScript 教程HTML DOM 教程jQuery 教程AngularJS 教程AngularJS2 教程Vue.js 教程Vue3 教程React 教程TypeScript 教程jQuery UI 教程jQuery EasyUI 教程Node.js 教程AJAX 教程JSON 教程Echarts 教程Chart.js 教程Highcharts 教程Google 地图 教程 服务端Python 教程Python2.x 教程Linux 教程Docker 教程Ruby 教程Java 教程C 教程C++ 教程Perl 教程Servlet 教程JSP 教程Lua 教程Rust 教程Scala 教程Go 教程PHP 教程数据结构与算法Django 教程FastAPI 教程Zookeeper 教程设计模式正则表达式Maven 教程Verilog 教程ASP 教程AppML 教程VBScript 教程 数据库SQL 教程MySQL 教程PostgreSQL 教程SQLite 教程MongoDB 教程Redis 教程Memcached 教程 数据分析Python 教程NumPy 教程Pandas 教程Matplotlib 教程Scipy 教程R 教程Julia 教程 移动端Android 教程Swift 教程jQuery Mobile 教程ionic 教程Kotlin 教程 XML 教程XML 教程DTD 教程XML DOM 教程XSLT 教程XPath 教程XQuery 教程XLink 教程XPointer 教程XML Schema 教程XSL-FO 教程SVG 教程 ASP.NETASP.NET 教程C# 教程Web Pages 教程Razor 教程MVC 教程Web Forms 教程 Web ServiceWeb Service 教程WSDL 教程SOAP 教程RSS 教程RDF 教程 开发工具Eclipse 教程Git 教程Svn 教程Markdown 教程 网站建设HTTP 教程网站建设指南浏览器信息网站主机教程TCP/IP 教程W3C 教程网站品质
Advertisement
反馈/建议
在线实例
·HTML 实例
·CSS 实例
·JavaScript 实例
·Ajax 实例
·jQuery 实例
·XML 实例
·Java 实例
字符集&工具
· HTML 字符集设置
· HTML ASCII 字符集
· JS 混淆/加密
· PNG/JPEG 图片压缩
· HTML 拾色器
· JSON 格式化工具
· 随机数生成器
最新更新
·
Rust 宏
·
Seaborn 教程
·
Pandas 相关性分析
·
31.2k star, 免...
·
Dev Home —...
·
免费开源的 AI ...
·
11.2k star, 免...
站点信息
·
意见反馈
·
免责声明
·
关于我们
·
文章归档
关注微信
Copyright © 2013-2024 菜鸟教程
runoob.com All Rights Reserved. 备案号：闽ICP备15012807号-1
微信关注
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 图标提供额外的属性, 提供的详细属性请继续阅读。
with extra class is-loading, your icon is able to rotate 360 deg in 2
seconds, you can also override this
Search
通过添加额外的类名 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
iconfont-阿里巴巴矢量图标库
iconfont-阿里巴巴矢量图标库
图标 Icon - Ant Design
图标 Icon - Ant Design
Enable JavaScript to run this app.
Ant Design⌘ K设计研发组件博客资源国内镜像5.15.2中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(
其本质上是创建了一个使用
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
在网页中使用 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 文件中正常显示。
我 你
这个方块也不是随意输入的，还得从我们前面下载的压缩文件夹中的 demo.html 查看。在浏览器中打开 demo.html ，移动到爱心图标右下角的区域，框选有时看得到、有时看不到的方块字符，复制到剪贴板，接着粘贴到 html 文件中。将方块字符粘贴到 html 中，如果此时在浏览器中预览网页效果的话，还是无法看到刚添加的字体图标的，因为还缺少对字体图标设置 CSS 样式——声明字体图标所使用的字体。html：我你
css：p span {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字体前端开发网页设计赞同 55 条评论分享喜欢收藏申请转载文章被以下专栏收录效率工具指南公主号同专栏名，欢
Icons 字体图标教程
Icons 字体图标教程
w3schools 教程
HTML
CSS
JAVASCRIPT
BOOTSTRAP
JQUERY
PHP
SQL
PYTHON
PYTHON2
JAVA
C
C++
C#
Linux
AI
教程库
参考手册
测验
练习
HOWTO
FAQ
Icons 字体图标教程
Icons 字体图标简介
Icons 字体图标大全
Font Awesome 5
Font Awesome 5 图标简介
Icons 辅助
Icons 警报
Icons 动物
Icons 箭头
Icons 音频和视频
Icons 汽车
Icons 秋季
Icons 饮料
Icons 品牌
Icons 建筑
Icons 商业
Icons 野营
Icons 慈善
Icons 聊天
Icons 国际象棋
Icons 儿童
Icons 服装
Icons 代码
Icons 通讯
Icons 电脑
Icons 建造工具
Icons 货币
Icons 日期和时间
Icons 设计
Icons 编辑器
Icons 教育
Icons 表情
Icons 能源
Icons 文件
Icons 金融
Icons 健身
Icons 食物
Icons 水果和蔬菜
Icons 游戏
Icons 性别
Icons 万圣节
Icons 手势
Icons 健康
Icons 节日
Icons 酒店
Icons 家居
Icons 图像
Icons 界面
Icons 物流
Icons 地图
Icons 航海
Icons 营销
Icons 数学
Icons 医学
Icons 视频
Icons 音乐
Icons 对象
Icons 支付和购物
Icons 药房
Icons 政治
Icons 宗教
Icons 科学
Icons 科幻
Icons 安全
Icons 形状
Icons 购物
Icons 社交
Icons 旋转
Icons 体育
Icons 春季
Icons 状态
Icons 夏季
Icons 桌面游戏
Icons 切换
Icons 旅行
Icons 用户和人物
Icons 车辆
Icons 天气
Icons 冬季
Icons 书写
Font Awesome 4
Font Awesome 图标简介
Icons 品牌
Icons 图表
Icons 货币
Icons 方向
Icons 文件类型
Icons 表单
Icons 性别
Icons 手势
Icons 医疗
Icons 支付
Icons 加载中
Icons 文本
Icons 交通工具
Icons 视频播放
Icons Web 程序
Bootstrap 图标
Icons BS 字体图标
Google 图标
Google 字体图标简介
Icons 动作
Icons 警报
Icons AV
Icons 通讯
Icons 内容
Icons 设备
Icons 编辑器
Icons 文件
Icons 硬件
Icons 图像
Icons 地图
Icons 导航
Icons 通知
Icons 放置
Icons 社交
Icons 切换
字体图标简介
❮ 首页
下一节 ❯
如何添加字体图标
要插入图标，请将图标类的名称添加到任何内联 HTML 元素中。
使用 和 元素被广泛用于添加图标。
下面图标库中的所有图标都是可缩放的矢量图标，可以使用CSS（大小、颜色、阴影等）进行自定义。
Font Awesome 5 图标
要使用免费 Font Awesome 5 图标，请访问 fontawesome.com 并注册登录以获取在网页中使用的代码。
关于如何开始使用Font Awesome 5 图标，请访问 Font Awesome 5 一章。
注释: Font Awesome 5 图标无需下载或安装！
实例
class="fas fa-cat">
亲自试一试 »
Font Awesome 4 图标
要使用 Font Awesome 4 图标，请在 HTML 页面的
部分添加以下行:注释: Font Awesome 4 图标无需下载或安装！
实例
亲自试一试 »
Bootstrap 3 图标
要使用 Bootstrap 3 图标，请在 HTML 页面的
部分添加以下行:注释: Bootstrap 3 图标无需下载或安装！
实例
亲自试一试 »
注释: Bootstrap 4 中不支持 Glyphicons。
有关 Bootstrap 3 和 Glyphicons 的更多信息，请访问我们的 Bootstrap 3 教程。
Google 图标
要使用 Google 谷歌图标，请在 HTML 页面的
部分添加以下行:注释: Google 谷歌图标无需下载或安装！
实例
cloudfavoriteattachmentcomputertraffic
亲自试一试 »
有关所有图标的完整列表 (font awesome, bootstrap 和 google)，请访问 图标参考手册。
❮ 上一节
下一节 ❯
颜色选择器
读后有收获微信请站长喝咖啡
报告错误
打印
关于
学习路线
×
错误报告
如果您发现内容有误或提出修改建议，请随时向我们发送 E-mail 邮件:
421660149@qq.com
您的建议:
您的 E-mail:
页面地址:
内容描述:
提交
×
感谢您的帮助！
您的建议已发送到 W3schools。
W3Schools 在线教程提供的内容仅用于学习和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
Copyright 2020-2024 关于我们 | 隐私条款 | 学习路线 | 京ICP备14045893号-9
Icon 图标 (组件) - Element UI 中文开发手册 - 开发者手册 - 腾讯云开发者社区-腾讯云
图标 (组件) - Element UI 中文开发手册 - 开发者手册 - 腾讯云开发者社区-腾讯云腾讯云开发者社区文档建议反馈控制台首页学习活动专区工具TVP最新优惠活动文章/答案/技术大牛搜索搜索关闭发布登录/注册搜索Bootstrap 4Bootstrap 3CC++Clojure 1.8Codeigniter 3CSSDocker 17ElectronElixir 1.5Erlang 20EslintExpressGitGoHTMLHTTPImmutable 3.8.1JavaScriptLodash 4Lua 5.3NginxPHPPhpunit 6PythonReactReact nativeRedisReduxRuby 2.4SassScikit imageSocket.IOSqliteSVGTensorFlow GuideTypescriptUnderscoreVue 2WebpackXslt & XpathYarnRxJS 5Rollup.jsBabel ParcelMobXKoaAngularGulpGruntStylelintStandard JS Element UI指南开发指南组件Layout 布局Container 布局容器Color 色彩Typography 字体Icon 图标Button 按钮Radio 单选框Checkbox 多选框Input 输入框InputNumber 计数器Select 选择器Cascader 级联选择器Switch 开关Slider 滑块TimePicker 时间选择器DatePicker 日期选择器DateTimePicker 日期时间选择器Upload 上传Rate 评分ColorPicker 颜色选择器Transfer 穿梭框Form 表单Table 表格Tag 标签Progress 进度条Tree 树形控件Pagination 分页Badge 标记Alert 警告Loading 加载Message 消息提示MessageBox 弹框Notification 通知NavMenu 导航菜单Tabs 标签页Breadcrumb 面包屑Dropdown 下拉菜单Steps 步骤条Dialog 对话框Tooltip 文字提示Popover 弹出框Card 卡片Carousel 走马灯Collapse 折叠面板iView UILavasMint UIPostCSS ThinkJSNestnpmNode.js教程JSON教程Groovy教程vb.net教程Storm入门教程Hibernate 教程Slick教程MongoDB教程Yii 2.0Element UI组件Icon 图标Icon 图标Icon 图标提供了一套常用的图标集合。使用方法直接通过设置类名为 el-icon-iconName 来使用即可。例如：搜索CSS 图标
CSS 图标
w3school 在线教程
HTML 系列教程
浏览器脚本
服务器脚本
编程教程
XML 系列教程
建站手册
参考手册
CSS 基础教程
CSS 教程
CSS 简介
CSS 语法
CSS 选择器
CSS 使用
CSS 注释
CSS 颜色
CSS RGB 颜色
CSS HEX 颜色
CSS HSL 颜色
CSS 背景
CSS 背景图像
CSS 背景重复
CSS 背景附着
CSS 简写背景属性
CSS 边框
CSS 边框宽度
CSS 边框颜色
CSS 边框各边
CSS 简写边框属性
CSS 圆角边框
CSS 外边距
CSS 外边距合并
CSS 内边距
CSS 高度/宽度
CSS 框模型
CSS 轮廓
CSS 轮廓宽度
CSS 轮廓颜色
CSS 简写轮廓属性
CSS 轮廓偏移
CSS 文本
CSS 文本对齐
CSS 文本装饰
CSS 文本转换
CSS 文字间距
CSS 文本阴影
CSS 字体
CSS 字体样式
CSS 字体大小
CSS 谷歌字体
CSS 简写字体属性
CSS 图标
CSS 链接
CSS 列表
CSS 表格
CSS 中级教程
CSS Display
CSS max-width
CSS 定位
CSS 溢出
CSS 浮动
CSS 清除浮动
CSS 布局 - 浮动实例
CSS inline-block
CSS 对齐
CSS 组合器
CSS 伪类
CSS 伪元素
CSS 不透明度
CSS 导航栏
CSS 垂直导航栏
CSS 水平导航栏
CSS 下拉菜单
CSS 图片库
CSS 图像精灵
CSS 属性选择器
CSS 表单
CSS 计数器
CSS 网站布局
CSS 单位
CSS 特异性
CSS3 高级教程
CSS 圆角
CSS 边框图像
CSS 背景
CSS 颜色
CSS 渐变
CSS 径向渐变
CSS 阴影
CSS box-shadow
CSS 文本效果
CSS 网络字体
CSS 2D 转换
CSS 3D 转换
CSS 过渡
CSS 动画
CSS 工具提示
CSS 图像样式
CSS object-fit
CSS 按钮
CSS 分页
CSS 多列
CSS 用户界面
CSS 变量
CSS 覆盖变量
CSS 变量 - JavaScript
CSS 变量 - 媒体查询
CSS Box Sizing
CSS Flexbox
CSS 媒体查询
CSS 媒体查询实例
CSS 响应式设计
RWD 简介
RWD 视口
RWD 网格视图
RWD 媒体查询
RWD 图像
RWD 视频
CSS 网格教程
CSS 网格布局模块
CSS 网格容器
CSS 网格项目
CSS 实例
CSS 实例
CSS 测验
CSS 测验
CSS 参考手册
CSS 参考手册
CSS 浏览器支持
CSS 选择器
CSS 函数
CSS 单位
CSS 听觉
CSS 网络安全字体
CSS 可动画制作
CSS 单位
CSS 颜色
CSS 颜色值
CSS 默认值
CSS 实体
CSS 图标
CSS 简写字体属性
CSS 链接
如何添加图标
向 HTML 页面添加图标的最简单方法是使用图标库，比如 Font Awesome。
将指定的图标类的名称添加到任何行内 HTML 元素（如 或 ）。
下面的图标库中的所有图标都是可缩放矢量，可以使用 CSS进行自定义（大小、颜色、阴影等）。
Font Awesome 图标
如需使用 Font Awesome 图标，请访问 fontawesome.com，登录并获取代码添加到 HTML 页面的
部分：
请在我们的 Font Awesome 5 教程中，阅读有关如何开始使用 Font Awesome 的更多内容。
提示：无需下载或安装！
实例
结果：
亲自试一试
Bootstrap 图标
如需使用 Bootstrap glyphicons，请在 HTML 页面的
部分内添加这行：
提示：无需下载或安装！
实例
结果：
亲自试一试
Google 图标
如需使用 Google 图标，请在HTML页面的
部分中添加以下行：
提示：无需下载或安装！
实例
cloud
favorite
attachment
computer
traffic
结果：
亲自试一试
CSS 简写字体属性
CSS 链接
CSS 参考手册
CSS 实例
CSS 测验
CSS 课外书
W3School 简体中文版提供的内容仅用于培训和测试，不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。版权所有，保留一切权利。
关于 W3School
帮助 W3School
使用条款
隐私条款
技术支持：赢科
蒙ICP备06004630号
Bootstrap Icons · Bootstrap 官方开源图标（icon）库
Bootstrap Icons · Bootstrap 官方开源图标（icon）库
Bootstrap
首页
文档
示例
图标
Sass
Less
模板
GitHub
Slack
Open Collective
下载
Bootstrap Icons
Bootstrap 有史以来第一次拥有自己的图标库，并且是专门为 Bootstrap 的组件和文档定制开发的。
Bootstrap Icons 的设计初衷是与 Bootstrap 组件配合使用，从表单到导航组件等。Bootstrap Icons 全部是 SVG 文件，因此能够轻松快捷地进行缩放，并可以通过 CSS 设置样式。虽然 Bootstrap Icons 是为 Bootstrap 而开发的，但它也可以应用于任何项目。
Bootstrap Icons 是开源的（采用 MIT 开源协议），因此你可以自由下载、使用以及扩展。不过请注意，目前该项目还处于 alpha 状态，未来可以会做很大的改变。
当前版本 v1.0.0-alpha4
•
图标列表
•
安装
•
用法
•
设置样式
•
GitHub 源码仓库
图标列表
Search for icons
Alarm fill
Alarm
Alt
App indicator
App
Archive fill
Archive
Arrow 90deg down
Arrow 90deg left
Arrow 90deg right
Arrow 90deg up
Arrow bar down
Arrow bar left
Arrow bar right
Arrow bar up
Arrow clockwise
Arrow counterclockwise
Arrow down circle fill
Arrow down circle
Arrow down left circle fill
Arrow down left circle
Arrow down left square fill
Arrow down left square
Arrow down left
Arrow down right circle fill
Arrow down right circle
Arrow down right square fill
Arrow down right square
Arrow down right
Arrow down short
Arrow down square fill
Arrow down square
Arrow down up
Arrow down
Arrow left circle fill
Arrow left circle
Arrow left right
Arrow left short
Arrow left square fill
Arrow left square
Arrow left
Arrow repeat
Arrow return left
Arrow return right
Arrow right circle fill
Arrow right circle
Arrow right short
Arrow right square fill
Arrow right square
Arrow right
Arrow up circle fill
Arrow up circle
Arrow up left circle fill
Arrow up left circle
Arrow up left square fill
Arrow up left square
Arrow up left
Arrow up right circle fill
Arrow up right circle
Arrow up right square fill
Arrow up right square
Arrow up right
Arrow up short
Arrow up square fill
Arrow up square
Arrow up
Arrows angle contract
Arrows angle expand
Arrows collapse
Arrows expand
Arrows fullscreen
Arrows move
Aspect ratio fill
Aspect ratio
Asterisk
At
Award fill
Award
Backspace fill
Backspace reverse fill
Backspace reverse
Backspace
Bag check
Bag dash
Bag fill
Bag plus
Bag
Bar chart fill
Bar chart
Basket fill
Basket
Basket2 fill
Basket2
Basket3 fill
Basket3
Battery charging
Battery full
Battery half
Battery
Bell fill
Bell
Blockquote left
Blockquote right
Book half
Book
Bookmark check
Bookmark dash
Bookmark fill
Bookmark plus
Bookmark
Bookmarks fill
Bookmarks
Bootstrap fill
Bootstrap reboot
Bootstrap
Bounding box circles
Bounding box
Box arrow down left
Box arrow down right
Box arrow down
Box arrow in down left
Box arrow in down right
Box arrow in down
Box arrow in left
Box arrow in right
Box arrow in up left
Box arrow in up right
Box arrow in up
Box arrow left
Box arrow right
Box arrow up left
Box arrow up right
Box arrow up
Box seam
Box
Braces
Briefcase fill
Briefcase
Brightness alt high fill
Brightness alt high
Brightness alt low fill
Brightness alt low
Brightness high fill
Brightness high
Brightness low fill
Brightness low
Brush
Bucket fill
Bucket
Building
Bullseye
Calendar check fill
Calendar check
Calendar date fill
Calendar date
Calendar day fill
Calendar day
Calendar fill
Calendar minus fill
Calendar minus
Calendar month fill
Calendar month
Calendar plus fill
Calendar plus
Calendar
Calendar2 check fill
Calendar2 check
Calendar2 date fill
Calendar2 date
Calendar2 day fill
Calendar2 day
Calendar2 fill
Calendar2 minus fill
Calendar2 minus
Calendar2 month fill
Calendar2 month
Calendar2 plus fill
Calendar2 plus
Calendar2
Calendar3 fill
Calendar3
Calendar4
Camera video fill
Camera video off fill
Camera video off
Camera video
Camera
Capslock fill
Capslock
Card checklist
Card heading
Card image
Card list
Card text
Caret down fill
Caret down square fill
Caret down square
Caret down
Caret left fill
Caret left square fill
Caret left square
Caret left
Caret right fill
Caret right square fill
Caret right square
Caret right
Caret up fill
Caret up square fill
Caret up square
Caret up
Cart check
Cart dash
Cart fill
Cart plus
Cart
Cart2
Cart3
Cart4
Chat dots fill
Chat dots
Chat fill
Chat quote fill
Chat quote
Chat square dots fill
Chat square dots
Chat square fill
Chat square quote fill
Chat square quote
Chat square
Chat
Check all
Check circle fill
Check circle
Check square fill
Check square
Check
Check2 all
Check2 circle
Check2 square
Check2
Chevron bar contract
Chevron bar down
Chevron bar expand
Chevron bar left
Chevron bar right
Chevron bar up
Chevron compact down
Chevron compact left
Chevron compact right
Chevron compact up
Chevron contract
Chevron double down
Chevron double left
Chevron double right
Chevron double up
Chevron down
Chevron expand
Chevron left
Chevron right
Chevron up
Circle fill
Circle half
Circle square
Circle
Clipboard data
Clipboard
Clock fill
Clock history
Clock
Cloud download
Cloud fill
Cloud slash fill
Cloud slash
Cloud upload
Cloud
Code slash
Code
Collection fill
Collection play fill
Collection play
Collection
Columns gap
Columns
Command
Compass
Cone striped
Cone
Controller
Credit card
Crop
Cup
Cursor fill
Cursor text
Cursor
Dash circle fill
Dash circle
Dash square fill
Dash square
Dash
Diamond fill
Diamond half
Diamond
Display fill
Display
Door closed fill
Door closed
Dot
Download
Droplet fill
Droplet half
Droplet
Egg fill
Egg fried
Egg
Eject fill
Eject
Emoji angry
Emoji dizzy
Emoji frown
Emoji laughing
Emoji neutral
Emoji smile upside down
Emoji smile
Emoji sunglasses
Envelope fill
Envelope open fill
Envelope open
Envelope
Exclamation circle fill
Exclamation circle
Exclamation diamond fill
Exclamation diamond
Exclamation octagon fill
Exclamation octagon
Exclamation square fill
Exclamation square
Exclamation triangle fill
Exclamation triangle
Exclamation
Exclude
Eye fill
Eye slash fill
Eye slash
Eye
File arrow down
File arrow up
File break
File check
File code
File diff
File earmark arrow down
File earmark arrow up
File earmark break
File earmark check
File earmark code
File earmark diff
File earmark minus
File earmark plus
File earmark ruled
File earmark spreadsheet
File earmark text
File earmark zip
File earmark
File minus
File plus
File post
File richtext
File ruled
File spreadsheet
File text
File zip
File
Files alt
Files
Film
Filter left
Filter right
Filter
Flag fill
Flag
Folder check
Folder fill
Folder minus
Folder plus
Folder symlink fill
Folder symlink
Folder
Fonts
Forward fill
Forward
Fullscreen exit
Fullscreen
Funnel fill
Funnel
Gear fill
Gear wide connected
Gear wide
Gear
Gem
Geo alt
Geo
Gift fill
Gift
Graph down
Graph up
Grid 1x2 fill
Grid 1x2
Grid 3x2 gap fill
Grid 3x2 gap
Grid 3x2
Grid 3x3 gap fill
Grid 3x3 gap
Grid 3x3
Grid fill
Grid
Grip horizontal
Grip vertical
Hammer
Hand index thumb
Hand index
Hand thumbs down
Hand thumbs up
Handbag fill
Handbag
Hash
Headphones
Heart fill
Heart half
Heart
Hexagon fill
Hexagon half
Hexagon
House door fill
House door
House fill
House
Hr
Image alt
Image fill
Image
Images
Inbox fill
Inbox
Inboxes fill
Inboxes
Info circle fill
Info circle
Info square fill
Info square
Info
Intersect
Justify left
Justify right
Justify
Kanban fill
Kanban
Laptop
Layers fill
Layers half
Layers
Layout sidebar inset reverse
Layout sidebar inset
Layout sidebar reverse
Layout sidebar
Layout split
Layout text sidebar reverse
Layout text sidebar
Layout text window reverse
Layout text window
Layout three columns
Layout wtf
Life preserver
Lightning fill
Lightning
Link 45deg
Link
List check
List nested
List ol
List task
List ul
List
Lock fill
Lock
Map
Mic fill
Mic mute fill
Mic mute
Mic
Minecart loaded
Minecart
Moon
Music note beamed
Music note list
Music note
Music player fill
Music player
Newspaper
Octagon fill
Octagon half
Octagon
Option
Outlet
Paperclip
Pause fill
Pause
Pen
Pencil square
Pencil
Pentagon fill
Pentagon half
Pentagon
People fill
People
Person bounding box
Person check fill
Person check
Person circle
Person dash fill
Person dash
Person fill
Person lines fill
Person plus fill
Person plus
Person square
Person
Phone landscape
Phone
Pie chart fill
Pie chart
Pip fill
Pip
Play fill
Play
Plug
Plus circle fill
Plus circle
Plus square fill
Plus square
Plus
Power
Puzzle fill
Puzzle
Question circle fill
Question circle
Question diamond fill
Question diamond
Question octagon fill
Question octagon
Question square fill
Question square
Question
Receipt cutoff
Receipt
Reply all fill
Reply all
Reply fill
Reply
Screwdriver
Search
Server
Shield fill
Shield lock fill
Shield lock
Shield shaded
Shield slash fill
Shield slash
Shield
Shift fill
Shift
Shop window
Shop
Shuffle
Skip backward fill
Skip backward
Skip end fill
Skip end
Skip forward fill
Skip forward
Skip start fill
Skip start
Slash circle fill
Slash circle
Slash square fill
Slash square
Slash
Sliders
Soundwave
Speaker
Square fill
Square half
Square
Star fill
Star half
Star
Stop fill
Stop
Stopwatch fill
Stopwatch
Subtract
Sun
Table
Tablet landscape
Tablet
Tag fill
Tag
Terminal fill
Terminal
Text center
Text indent left
Text indent right
Text left
Text right
Textarea t
Textarea
Three dots vertical
Three dots
Toggle off
Toggle on
Toggles
Tools
Trash fill
Trash
Trash2 fill
Trash2
Triangle fill
Triangle half
Triangle
Trophy
Truck flatbed
Truck
Tv fill
Tv
Type bold
Type h1
Type h2
Type h3
Type italic
Type strikethrough
Type underline
Type
Union
Unlock fill
Unlock
Upc scan
Upc
Upload
View list
View stacked
Volume down fill
Volume down
Volume mute fill
Volume mute
Volume off fill
Volume off
Volume up fill
Volume up
Vr
Wallet
Wallet2
Watch
Wifi
Window
Wrench
X circle fill
X circle
X diamond fill
X diamond
X octagon fill
X octagon
X square fill
X square
X
安装
Bootstrap Icons 已被发布到了 npm，但是仍然可以手动下载并安装。
通过 npm 安装
利用如下 npm 命令安装 Bootstrap Icons。
npm install bootstrap-icons
下载安装包
所有已发布的 版本 都保存在 GitHub 上。所有 SVG 格式的图标都包含在安装包内，其中也包括许可证和 readme 文件。package.json 文件也被包含在内，不过这些 npm 脚本主要用于我们的开发流程。
Download latest ZIP
用法
Bootstrap Icons 的图标都是 SVG 格式的，因此你可以通过以下几种方式将他们应用到你的 HTML 中，具体使用哪种方式取决于你的项目是如何设置的。Bootstrap Icons 默认将 width 和 height 设置为 1em，便于你通过 font-size 属性重置图标的大小。
内嵌
将图标嵌入你的 HTML 页面中（与引用外部图像文件相反）。如下例子中我们对 width 和 height 属性进行了重新设置。
作为外部图像文件引用
将 Bootstrap icons 的 SVG 文件复制到你所选择的目录中，并像引用普通图像一样使用 元素引入 SVG 图标。
CSS
你还可以在 CSS 中使用 SVG 图标（当指定十六进制颜色值时 务必对某些字符进行转义，例如将 # 字符替换为 %23）。如果未指定
如果需要使用 background-size 来调整图标的大小，则必须设置 viewBox 属性。请注意，xmlns 属性是必需的。
.bi::before {
display: inline-block;
content: "";
background-image: url("data:image/svg+xml,");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
设置样式
可以通过设置 .text-* 类或自定义 CSS 来改变颜色：
...
使用 SVG 时的注意事项
SVG 是非常棒的技术，但是它们仍然存在一些需要处理的怪异行为。考虑到 SVG 有多种使用方式，我们在代码中没有包含以下这些属性和处理手段。
Internet Explorer 和 Edge 浏览器对焦点的处理不正确。 在嵌入 SVG 时，请为
某些浏览器将 SVG 视为带有语音辅助的 标签。 尽可能添加 role="img" 属性以避免这些问题。 详见此文章
Safari 浏览器在使用非可聚焦（non-focusable）的 SVG 时会忽略 aria-label 属性。 因此，在嵌入
如果您发现了其他应该引起注意的问题，请向我们提交 issue 并详细说明。
GitHub
当前版本 v1.0.0-alpha4. Icons and documentation licensed MIT.