Material Design Icons

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Material Design Icons 是 Google 的 Material Design 里面包含的一组图标,你可以在它的网站上去下载需要的小图标 .. 也可以使用它的字体图标 ..

在设计里,使用这组图标的最简单的方法可以直接在页面上添加这行代码 ... 这里就是直接链接了在 google 字体里的 material icons 这种字体 ..

或者我们也可以把它下载到本地,就是自己存储它们 ..

可以使用 npm 或者 yarn 去安装一下 .. material-design-icons ...

这样会把它下载到 node_modules 目录的下面 ...

在这里可以找到 material-design-icons ..

我们只需要它里面的 icon-font .. 这里有个 material-icons.css,你可以在页面上链接使用这个样式表 ..

我配置了本地项目的服务器,你可以直接链接在 node_modules 里面的资源 ..

material-design-icons/iconfont/material-icons.css

这两个方法用其中的一个就行 .. 可以注释掉一个 ..

在我们的导航栏上面,可以去试一下 .. 放在 menu 元素的下面 .. 这样它跟 menu ,还有上面的 header 属于兄弟元素 ..

要添加一个图标,可以先用一个小 i 标签,不同的图标字体使用的方法都不太一样 .. material design 的图标字体要求我们在这个小 i 标签上加上 material-icons 这个类 ..

在这组标签里再输入要用的图标的名字 ... 这里我需要一个 search ...

现在,页面上会显示一个搜索图标,这个小图标就是 material design 里面的搜索图标 ..

Material Design Icons《 网页设计案例:导航栏 》

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点