[指南] 如何使用 Google 所提供的 Material Icon

章节连结

Google 所维护的 Material icon 是一个公开且可商用的资料库,由于是向量图形式,所以无论萤幕尺寸是何大小,都可以轻松的看清楚。预设提供 SVG, PNG 和 icon Font 三种型式,且有 18, 24, 36 和 48 px 四种大小。
material icon


如何使用

1. 在载入网页使用前,记得有先行载入图示字型 – Google Fonts,直接用 CDN 的方式引入即可。
2. 点选右上角的 Resources,然后搜寻你要的图示名称
material-icon list3. 以 <i class=”material-icons”>Icon Name</i> 的形式载入即可


程式码


其他相关文章

  • [笔记] 解决 VS Code Terminal 中无法正常显示字体的问题
  • [笔记] HTML 与 PUG 线上格式转换
  • [笔记] 网页切版直播班 2020 春季班 – 第七周
  • [笔记] 使用 Gulp 进行网页前端自动化 – 用一般 HTML 来制作样板并排版
  • [笔记] 使用 Gulp 进行网页前端自动化 – 依照开发环境调整布署内容
  • [笔记] 使用 Gulp 进行网页前端自动化 – 架设简易伺服器和压缩程式码
  • [指南] 如何使用 Google 所提供的 Material Icon
  • [笔记] 使用 Gulp 进行网页前端自动化 – Gulp 和 Bower 串接
  • [笔记] 网页切版直播班 2020 春季班 – 第六周
  • [笔记] 使用 Gulp 进行网页前端自动化 – PostCSS 自动加上前缀 & Load Plugins
  • [笔记] 网页切版直播班 2020 春季班 – 第五周
  • [笔记] Carbon 程式码使用 让你的网页程式码显示的更漂亮
  • [笔记] 使用 Gulp 进行网页前端自动化 – 初始化你的第一个 Gulp 编译专案
  • [笔记] 开始使用 Github Pages
  • [笔记] 使用 Gulp 进行网页前端自动化 – 简介
  • [笔记] 网页切版直播班 2020 春季班 – 第四周
  • [笔记] 来训练你的手指运动 – 英打练习 Typing Pratice
  • [笔记] Emmet 网路开发必备简码 加速你的开发流程
  • [笔记] 网页切版直播班 2020 春季班 – 第三周
  • [笔记] 运用 Moment.js 制作 AM / PM 时间外挂
  • [笔记] HTML5 Input time 时间格式
  • [笔记] 网页切版直播班 2020 春季班 – 第二周
  • [笔记] 网页切版直播班 2020 春季班 – 第一周
  • [笔记] MarkMan 跨平台 设计稿标注与量测工具
  • [笔记] Sass 实战全攻略 – 11 – 自制格线系统
  • [笔记] CodeSandbox 线上编辑器 模拟前端框架
  • [笔记] Sass 实战全攻略 – 10 – 设计模式和规范
  • [笔记] 工字型样板,长方形依照比例缩放
  • [笔记] Element-UI 的自定义表格边框样式
  • [笔记] Vue 关于 slot-scope 的简易认知
  • [笔记] Chart.js 长条图 最大值用特别颜色表示
  • [笔记] Sass 实战全攻略 – 9 – 错误的 CSS 设计方式
  • [笔记] Vue Watch 监听并延后发送请求
  • [笔记] Sass 实战全攻略 – 8 – 关于命名的那些事儿
  • [笔记] Element UI Table 表格表头纵向显示
  • [笔记] Sass 实战全攻略 – 7 – Sass/CSS 设计模式 (OOCSS)
  • [笔记] Sass 实战全攻略 – 6 – Sass/CSS 设计模式 (Smacss)
  • [笔记] 自定义 Element UI 标题栏位遇上 Vue/no-unused error 的解决方法
  • [笔记] CSS 上常见的水平置中 & 垂直置中方法
  • [笔记] Sass 实战全攻略 – 5 – mixin 解决响应式网页的断点问题
  • [笔记] Sass 实战全攻略 – 4 – mixin 统整你常用的 CSS 方法
  • [笔记] Sass 实战全攻略 – 3 – import 切分档案和维护
  • [笔记] Vue2 Perfect-Scrollbar 置底开始
  • [笔记] Sass 实战全攻略 – 2 – 变数的运用
  • [笔记] Body-Parser 无法解析的 FormData 解决方案 – multer
  • [笔记] Sass 实战全攻略 – 1 – 简介
  • [全端开发] 打造一个公开聊天室 Vue.js+MySQL+Socket.io+passport-jwt
  • [指南] 简单制作自己的 Google 套件 (Extension)
  • [笔记] CSV 档汇入 PostgreSQL 常见错误一览
  • [笔记] 使用 PGAdmin 操作 Heroku 上的 PostgreSQL
  • [笔记] FlatIcon 免费非商业使用的向量图示图库
  • [笔记] 2020 前端工程师面试全记录
  • 工程师之路 Learning Programming
  • [指南] 线上 QR Code 产生器
  • [笔记] 台湾县市二联式选单 tw-city-selector.js
  • [笔记] Node.js 在 Windows 上的开发环境建置
  • [笔记] Heroku Sequelize 布署细节
  • [笔记] HTML 表格 Table 的 tr td th 用法
  • [笔记] 运用 Heroku 布署的初始化步骤
  • [笔记] 线上正规表示式测试器
  • [笔记] TinyURL 服务串接
  • 运用 Node.js 建网站的初始化步骤
  • [笔记] JavaScript 双层选单筛选连动
  • [笔记] Heroku 布署问题:如何将 Git 的子资料夹专案推上云端?
  • [笔记] Google, Facebook, Github OAuth 认证设定申请
  • Mongo DB 条件操作符
  • Express Validator 操作介绍
  • 安装 MongoDB 出现 SocketException: Address already in use 错误
  • [笔记] KeyCode & querySelectorAll 全部加上事件
  • [笔记] Can I Use 查询语法在各浏览器上可否正常使用
  • [笔记] JavaScript 将两个 array 合并一个 array
  • [笔记] 纯 CSS 制作图片轮拨效果
  • [笔记] API 串接, Axios 和绑定DOM事件
  • [笔记] CSS ul li 水平置中方法
  • [笔记] Async 非同步处理和 JSON Object 取值
  • [笔记] textContent, event.target 和 innerHTML
  • [笔记] BootStrap Card + Grid System + Modal 弹出视窗
  • [笔记] Lorem Picsum 网页开发自动生成缩图
  • [部落格经营] Contact form 7 表格自动缩放
  • [部落格经营] WordPress 中文 摘要 错误修正
  • 按赞加入粉丝团

    延伸阅读

    GA浏览人气:6