开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

用bootstrap文本类替换google material图标

Bootstrap是一个流行的前端开发框架，它提供了丰富的组件和样式，可以帮助开发者快速构建响应式网站和Web应用程序。而Google Material图标是一套由Google提供的开源图标库，包含了大量的矢量图标，可以用于美化网站和应用的用户界面。

如果要用Bootstrap文本类替换Google Material图标，可以采用以下步骤：

在Bootstrap官网（https://getbootstrap.com/）下载最新版本的Bootstrap框架，并将其引入到你的项目中。
在HTML文件中引入Bootstrap的CSS文件和JavaScript文件，确保框架正常加载。
在需要替换Google Material图标的地方，使用Bootstrap提供的文本类来代替。Bootstrap提供了一些常用的文本类，如text-primary（主要文本颜色）、text-success（成功文本颜色）、text-danger（危险文本颜色）等。你可以根据具体需求选择合适的文本类来替换图标。
如果需要更多的图标选择，可以使用Bootstrap提供的图标字体库，如Glyphicons。Glyphicons是一套基于字体的图标集合，包含了各种常用的图标，可以通过添加相应的CSS类来使用。你可以在Bootstrap官网的文档中找到Glyphicons的使用方法和示例。

总结起来，使用Bootstrap文本类替换Google Material图标的步骤如下：

下载并引入Bootstrap框架。
引入Bootstrap的CSS和JavaScript文件。
使用Bootstrap提供的文本类来替换Google Material图标。
如需更多图标选择，可以使用Bootstrap提供的图标字体库。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

网页设计太麻烦

工具包中使用了免费的Google字体和多种免费图标。适用于Sketch，Photoshop，XD和Figma。...优秀Bootstrap材料设计案例 1．Bootstrap 4 & Material Design -作品集模板 ?...免费下载 Material Kit是一款免费的Bootstrap4 UI工具包，采用全新设计，灵感源自Google的材料设计。包含60个组件，3个示例页面和2个完全可自定义的插件。 3....包含400多个素材UI元素，600多个素材图标，74个CSS动画，SASS文件，模板，教程等。 5. Material Admin –后台管理模板 ?...免费下载 Material Admin是完全使用Bootstrap框架构建的免费管理模板，提供按钮、图标、表格、排版等基础组件。

3.9K3 0

Kali Linux 安装 Fcitx

2）点击左下角的加号，找到最后一项，选中 Google Pinyin，确定。 3）更多配置可以自己尝试，或者查看 Arch Wiki。...个人觉得就 dark 还看得过去，特别是 Kali 默认的暗色主题，用 dark 很合适。当然，如果你把 GNOME 主题换成了雪白雪白的，那么 dark 估计就不行了，咋整呢？...solution 2 博主 Google 到 GitHub 一个漂亮的 Material Design 风格的皮肤，首先下载，然后将 material 文件夹移动到 /usr/share/fcitx/skin...1）托盘的图标太亮。...，替换即可。

12.1K3 0

在线免费制作架构图

在UML系统开发中有三个主要的模型：功能模型：从用户的角度展示系统的功能，包括用例图。对象模型：采用对象，属性，操作，关联等概念展示系统的结构和基础，包括类别图、对象图。...通过Freedgo Desgin 可以绘制各类UML图表，包括 UML 用例图 UML 类图 UML 时序图 UML 活动图 UML 泳道图点击页面下面 + 更多图形，选择商务/(业务建模) ->...流程图使用一些标准符号代表某些类型的动作，如决策用菱形框表示，具体活动用方框表示。但比这些符号规定更重要的，是必须清楚地描述工作过程的顺序。...IOS UX] android [在线绘制Android] material [在线绘制Material] Bootstrap [在线绘制Bootstrap] 手机应用 [在线绘制手机应用] 网站应用...架构 [在线绘制GOOGLE架构] 工程 Freedgo Design 提供在线基本电气图设计、在线电气逻辑图设计、在线电路原理图设计、在线接线图设计 [在线绘制电气图]

62K4 1

18 个漂亮的 Bootstrap 模板

用纯 Javascript 构建的 Bootstrap 管理模板很棒的 React 管理模板实用的Angular管理仪表板响应式 Vue 管理仪表盘模板用纯 Javascript 构建的 Bootstrap...Bootstrap 4.2.1. 用 AJAX 重新加载页面。特殊的电子商务部分，大量有用的小部件，8个图表库，数百个页面，如：图库、日历、时间轴等等。互动教程和首次打开应用时的提示。...现代 Google 的材料设计。使用 Bootstrap Material Design 框架构建。惊人而流畅的动画。很棒的通知和报警系统。 15 个内置插件，大量示例页面，5 组不同的图标。...随附所有必需的组件：图标、按钮、表单、表格图表。包括特定的应用程序，例如在线聊天、任务板、视频播放器。 5个内置仪表板：CRM、Crypto、课程、Saas、Web 分析。...用 VueJS 2.5.2 和 Bootstrap 4 构建。也提供 Angular 和 React 版本。不含 jQuery。模块化架构，易于定制。

14.2K1 1

Ways to Use Icons on Android (1)

本节主要介绍几种Material Design图标的使用姿势。...1.Material Design图标简介 Github网址：https://github.com/google/material-design-icons 内容介绍网址：http://google.github.io...文件夹下的XML格式文件（Vectore Drawable），里面的图标大小都是24dp，颜色都是黑色。...此外，它的图标来源于https://materialdesignicons.com/，除了Google官方的那些Material Design风格图标之外，还包含了一些社区（Community）创作的Material...该项目的设计非常好，易于扩展，它将来自Google的Material Design图标和来自Community的Material Design图标分拆成两个独立的模块以供使用。

4862 0

2019-06-03 GitHub 上的顶级项目都是做什么的？

竞品：Semantic UI, pure-css FontAwesome/Font-Awesome 字体和图标库，可以使用 SVG 和字体等等多种格式。...和 Bootstrap 等的区别在于，Bootstrap 更偏向于 UI 方面，是 CSS 框架，而 antd 则是完整的包括 UI 和功能在内的 React 组件。...Semantic UI 更强调使用语义化的 class 来定义样式 google / material-design-icons Google 推出的 Material 风格图标库。...ElementUI/Element 饿了么出品的 Vue 组件库 google/material-design-lite Google 的 Material Design 的一个简化版, 貌似现在不再支持了...Dogfalo/materialize Material 风格的前端 CSS 库 callemall/material-ui Material 风格的 React 组件库 necolas/normalize.css

1.4K8 0

GitHub 上的顶级项目都是做什么的？（一）

计划是把 GitHub 上 5k+ Star 的项目都知道是做什么用的，每周看 50 个，数据来源是这里：https://gitstar-ranking.com/repositories。...竞品：Semantic UI, pure-css FontAwesome/Font-Awesome 字体和图标库，可以使用 SVG 和字体等等多种格式。...和 Bootstrap 等的区别在于，Bootstrap 更偏向于 UI 方面，是 CSS 框架，而 antd 则是完整的包括 UI 和功能在内的 React 组件。...可以理解为 Bootstrap 只做了“皮”，而 antd 是 “皮” + “骨”。 Semantic-Org/Sematic-UI 和 Bootstrap 类似的一个组件库。...Semantic UI 更强调使用语义化的 class 来定义样式 google / material-design-icons Google 推出的 Material 风格图标库。

1.2K2 1

GitHub 上的顶级项目都是做什么的？

计划是把 GitHub 上 5k+ Star 的项目都知道是做什么用的，每周看 50 个。...google / material-design-icons Google 推出的 Material 风格图标库。 daneden/animate.css CSS 动画效果库。...ElementUI/Element 饿了么出品的 Vue 组件库 google/material-design-lite Google 的 Material Design 的一个简化版，貌似现在不再支持了...不过我还是喜欢用 curl。...用 Docker 打镜像可以避免装环境的困扰，同时相对于虚拟机来说，又不会有很多性能损失。

1.6K1 1

GitHub 上的顶级项目都是做什么的？

计划是把 GitHub 上 5k+ Star 的项目都知道是做什么用的，每周看 50 个。...竞品：Semantic UI, pure-css FontAwesome/Font-Awesome 字体和图标库，可以使用 SVG 和字体等等多种格式。...它和 Bootstrap 等的区别在于，Bootstrap 更偏向于 UI 方面，是 CSS 框架，而 antd 则是完整的包括 UI 和功能在内的 React 组件。...可以理解为 Bootstrap 只做了 “皮”, 而 antd 是 “皮” + “骨”。 Semantic-Org/Sematic-UI 和 Bootstrap 类似的一个组件库。...google / material-design-icons Google 推出的 Material 风格图标库。 daneden/animate.css CSS 动画效果库。

1.3K1 0

Android L+ Theme 与 Toolbar 实例

于是乎，我也开始学习它，这里随着学习的进度会写相应的博文。...有关Material Design的学习资料还是Google的官方文档最好，这里给出有分享精神的小伙伴们的翻译项目Material Design 中文版, 供大家学习与参考。...@android:style/Theme.Material @android:style/Theme.Material.Light @android:style/Theme.Material.Light.DarkActionBar...app:subtitle=”Sub Title” ：Toobar中的小标题 app:navigationIcon=”@android:drawable/ic_menu_sort_by_size” ：导航图标...（注意和Logo的区别） ####用java代码设置： mToolbar.setTitle("App Title"); //设置Toolbar标题 mToolbar.setSubtitle("Sub

5984 0

再不迁移到Material Design Components 就out啦

更新到 MDC 首先要将build.gradle 依赖中 com.android.support:design:28.0.0 修改成 com.google.android.material:material...和 AppCompat 一样，MDC 会在填充的时候用 MDC 等效的控件来替换某些原始控件。这样就可以发布新功能和错误修正了，而不必将所有声明都换成新的类型。...我们例子中如果是 Theme.AppCompat.* 的主题，那么就会把 Button 用 AppCompatButton 来替换。...、date picker、badges、toggle buttons 无障碍功能提升、bug 修复等等 implementation ‘com.google.android.material:material.../develop/android/ 示例更新用 MDC 版本的组件来替换 <!

3.2K3 0

Mark！Android最佳的开源库集锦

Material Camera：基于Android平台的相机框架。 ➤位置 ReactiveLocation：是一个轻量小型但非常实用的Google Play API封装，可以获取位置。...➤地图 AirMapView：一个视图抽象、可以在没有 Google Play Services的情况下让设备使用的地图交互功能。 Google地图实用工具汇总，例如热图或标记聚类。...➤Activity Indicator AppIntro：实现类似Google Apps的应用启动引导页。 LolliPin：Material Design风格的Pin码输入界面。...➤按钮 Android-Bootstrap：使用Bootstrap实现各种按钮功能。 Android Morphing Button：实现按钮的动态变化切换。...SimpleRatingBar：一个用于替换系统提供的评分控件的函数库。 ➤Slider SlidingMenu：可为应用程序创建侧滑菜单的库。

2.1K7 0

Material design无需照搬Google

最近，我们决定替换一下我们常备的邮件app原型，换成更迷人、跟上时代的东西——其中考虑采用了Google的material design原则。但我们注意到。...我们要确坚持material design基于触摸、用动效表达意义、大胆地表达意图的核心原则，但不能完全复制Google Now或是Inbox。...尽管关于设计趋势的讨论，都倾向于将渐变、投影和拟物化融为一体，于是，我们向用户展现了引人注目的渐变色，以示区分——包括app主图标中的条纹。...构成这种渐变的色彩来源于material的配色，但我们以一种Google没有的方式进行混合。然后我们给悬浮操作按钮加了一定程度的透明。不过在信封的翻折处仍然有浓厚的阴影。...但颜色不必强烈反差来满足material的标准、达成目的——只要意图鲜明就可以了。我们的邮件app最后用了相对简单、接近的配色，采用投影和渐变来区别于Google，同时创造并传达其意义。字体 ?

1.2K6 0

AngularDart Material Design 图标顶

MaterialIconComponent Selector: 材料样式图标。...family=Material+Icons"> 确保考虑RTL。具体来说，如果要为RTL UI翻转图标，请使用flip属性。阅读这些指南，了解何时翻转何时不翻转图标。...Attributes: size：String - 图标的大小。...flip - 是否应翻转RTL语言的图标。 light - 是否应减少图标的不透明度。 baseline是否需要将图标与基线对齐。...有关可用图标，请参阅https://www.google.com/design/icons/。如果图标名称包含空格，请用下划线替换它们。

6696 0

盘点 Shiny 中的各种主题和 UI 插件

•shinymaterial https://github.com/ericrayanderson/shinymaterial - 在 Shiny 中使用 Material Design。...•shinyCleave https://github.com/CannaData/shinyCleave - 基于 Cleave.js 定义文本类型 (电话号码, 邮编等) 。...•esquisse https://github.com/dreamRs/esquisse - 用拖拽的方式实现 ggplot2 绘图。 ?...Icon Font •fontawesome https://github.com/rstudio/fontawesome - 方便我们嵌入 FontAwesome 图标。...•icongram https://github.com/r4fun/icongram - Icongram 接口，方便调用 svg 图标。

7.4K1 0

盘点 Shiny 中的各种主题和 UI 插件

•shinymaterial https://github.com/ericrayanderson/shinymaterial - 在 Shiny 中使用 Material Design。...•shinyCleave https://github.com/CannaData/shinyCleave - 基于 Cleave.js 定义文本类型 (电话号码, 邮编等) 。...•esquisse https://github.com/dreamRs/esquisse - 用拖拽的方式实现 ggplot2 绘图。 ?...Icon Font •fontawesome https://github.com/rstudio/fontawesome - 方便我们嵌入 FontAwesome 图标。...•icongram https://github.com/r4fun/icongram - Icongram 接口，方便调用 svg 图标。

6.1K3 0

后台管理UI的选择

下载下载后大家可以替换成最新的1.5版的easyui 官网：http://www.jeasyui.com/，有免费版，有商业版，商业版收费，帮助非常详尽资源：http://www.jeasyui.net...http://www.h-ui.net/H-ui.admin.shtml 后台，http://www.h-ui.net/ 前台下载：https://github.com/jackying/ 缺点：感觉用的人少...Buttons 特点：响应式布局，支持多种设备打印增强丰富可排序的面板组件 18个插件与3个自定义插件轻量、快速兼容主流浏览器，IE8不兼容支持Glyphicons, Fontawesome和Ion图标...10. material-dashboard Github Star 数 7111，Github 地址： https://github.com/creativetimofficial/material-dashboard...基于 Bootstrap 4 和 Material 风格的控制面板。

5K2 1

工作五年多，idea插件推荐（一）

你还可以使用插件的其他功能，如替换文本、翻译文档等。...右键指定目录生成即可 Atom Material Icons Atom Material Icons 是一个为 Atom 编辑器设计的图标主题。...Atom Material Icons 的设计灵感来自于 Google Material Design，它采用了简洁、扁平的风格，图标清晰易辨。...这个图标主题提供了丰富的图标，包括常见文件类型、文件夹、操作按钮等等，可以根据用户的需要进行自定义和配置。...如果你喜欢 Google Material Design 的风格，这个主题可能会成为你的首选。

6115 0

欢迎体验 | Wear OS 版 Compose 开发者预览版

作者 / 开发者关系工程师 Jeremy Walker 在今年的 Google I/O 大会上，我们宣布将 Jetpack Compose 的优秀特性引入 Wear OS。...Compose 能简化并加速 UI 开发，Wear OS 版 Compose 也是如此，借助内置的 Material You 支持，您可以用更少的代码构建更精美的应用。....*) androidx.wear.compose:compose-material 替换 androidx.compose.material:material¹ androidx.wear.compose...开发者可以继续使用其他与 Material 相关的开发库，如 Material 涟漪和通过 Wear Compose Material 开发库进行扩展的 Material 图标。...Scaffold Scaffold 提供了布局结构，以帮助您像移动设备一样，用常见模式排列屏幕，但并非应用栏、悬浮操作按钮 (FAB) 或抽屉式导航栏等模式。

1.6K1 0

【无标题】

Transaction Translation 是一个 IntelliJ IDEA 的插件，它可以帮助开发者进行翻译和替换文本。...Atom Material Icons Atom Material Icons 是一个为 Atom 编辑器设计的图标主题。...Atom Material Icons 的设计灵感来自于 Google Material Design，它采用了简洁、扁平的风格，图标清晰易辨。...这个图标主题提供了丰富的图标，包括常见文件类型、文件夹、操作按钮等等，可以根据用户的需要进行自定义和配置。...如果你喜欢 Google Material Design 的风格，这个主题可能会成为你的首选。

2072 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭