• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

mervick/material-design-icons: Material Design Icons

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

mervick/material-design-icons

开源软件地址(OpenSource Url):

https://github.com/mervick/material-design-icons

开源编程语言(OpenSource Language):

CSS 60.2%

开源软件介绍(OpenSource Introduction):

Stand With Ukraine

Material Design Icons

mervick.github.io/material-design-icons

Material design icons are the official icon set from Google that are designed under the material design guidelines.

Installation

Yarn

yarn add @mervick/mdi-icons

NPM

npm install @mervick/mdi-icons --save

Usage

Add to your html page in the head area

<!-- This include bundle of CSS classes with all Material Icons fonts (5 fonts) -->
<link href="css/material-icons.min.css" rel="stylesheet">

You can customize and use only fonts you want:

<!-- base CSS classes (required) -->
<link href="css/material-icons-base.min.css" rel="stylesheet">

<!-- loads Material Icons Regular font -->
<link href="css/material-icons-regular.min.css" rel="stylesheet">

<!-- loads Material Icons Outlined font -->
<link href="css/material-icons-outlined.min.css" rel="stylesheet">

<!-- loads Material Icons Round font -->
<link href="css/material-icons-round.min.css" rel="stylesheet">

<!-- loads Material Icons Sharp font -->
<link href="css/material-icons-sharp.min.css" rel="stylesheet">

<!-- loads Material Icons Two Tone font -->
<link href="css/material-icons-two-tone.min.css" rel="stylesheet">

You can also use fonts from Google Fonts:

<!-- base CSS classes (required) -->
<link href="css/material-icons-base.min.css" rel="stylesheet">

<!-- loads Material Icons Regular font -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">

<!-- loads Material Icons Outlined font -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined" rel="stylesheet">

<!-- loads Material Icons Round font -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round" rel="stylesheet">

<!-- loads Material Icons Sharp font -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp" rel="stylesheet">

<!-- loads Material Icons Two Tone font -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone" rel="stylesheet">

There are two ways to use:

  • Ligature, this one is awesome but have some troubles
<!-- Material Icons Regular font -->
<i class="material-icons">accessibility</i>
<i class="material-icons">3d_rotation</i>
<i class="material-icons">airline_seat_legroom_reduced</i>

<!-- Material Icons Outlined font -->
<i class="material-icons-outlined">accessibility</i>
<i class="material-icons-outlined">3d_rotation</i>
<i class="material-icons-outlined">airline_seat_legroom_reduced</i>

<!-- Material Icons Round font -->
<i class="material-icons-round">accessibility</i>
<i class="material-icons-round">3d_rotation</i>
<i class="material-icons-round">airline_seat_legroom_reduced</i>

<!-- Material Icons Sharp font -->
<i class="material-icons-sharp">accessibility</i>
<i class="material-icons-sharp">3d_rotation</i>
<i class="material-icons-sharp">airline_seat_legroom_reduced</i>

<!-- Material Icons Two Tone font -->
<i class="material-icons-two-tone">accessibility</i>
<i class="material-icons-two-tone">3d_rotation</i>
<i class="material-icons-two-tone">airline_seat_legroom_reduced</i>
  • CSS classes (preferred)
<!-- Material Icons Regular font -->
<i class="mdi mdi-accessibility"></i>
<i class="mdi mdi-3d-rotation"></i>
<i class="mdi mdi-airline-seat-legroom-reduced"></i>

<!-- Material Icons Outlined font -->
<i class="mdi-outlined mdi-accessibility"></i>
<i class="mdi-outlined mdi-3d-rotation"></i>
<i class="mdi-outlined mdi-airline-seat-legroom-reduced"></i>

<!-- Material Icons Round font -->
<i class="mdi-round mdi-accessibility"></i>
<i class="mdi-round mdi-3d-rotation"></i>
<i class="mdi-round mdi-airline-seat-legroom-reduced"></i>

<!-- Material Icons Sharp font -->
<i class="mdi-sharp mdi-accessibility"></i>
<i class="mdi-sharp mdi-3d-rotation"></i>
<i class="mdi-sharp mdi-airline-seat-legroom-reduced"></i>

<!-- Material Icons Two Tone font -->
<i class="mdi-two-tone mdi-accessibility"></i>
<i class="mdi-two-tone mdi-3d-rotation"></i>
<i class="mdi-two-tone mdi-airline-seat-legroom-reduced"></i>

Using CSS classes, you can also use additional features such as:

<!-- Inverse -->
<i class="mdi mdi-attachment mdi-inverse"></i>

<!-- Animated -->
<i class="mdi mdi-attachment mdi-spin"></i>
<i class="mdi mdi-attachment mdi-pulse"></i>

<!-- Fixed width -->
<i class="mdi mdi-attachment mdi-fw"></i>

<!-- Bordered -->
<i class="mdi mdi-attachment mdi-border"></i>

<!-- Pulled -->
<i class="mdi mdi-attachment pull-left"></i>
<i class="mdi mdi-attachment pull-right"></i>

<!-- Sizes -->
<i class="mdi mdi-attachment mdi-lg"></i>
<i class="mdi mdi-attachment mdi-2x"></i>
<i class="mdi mdi-attachment mdi-3x"></i>
<i class="mdi mdi-attachment mdi-4x"></i>
<i class="mdi mdi-attachment mdi-5x"></i>

<!-- Rotations -->
<i class="mdi mdi-attachment mdi-rotate-90"></i>
<i class="mdi mdi-attachment mdi-rotate-180"></i>
<i class="mdi mdi-attachment mdi-rotate-270"></i>

<!-- Flips -->
<i class="mdi mdi-attachment mdi-flip-horizontal"></i>
<i class="mdi mdi-attachment mdi-flip-vertical"></i>

<!-- In lists -->
<ul class="mdi-ul">
    <li><i class="mdi-li mdi mdi-keyboard-arrow-right"></i>Lorem ipsum dolor ...</li>
</ul>

Licenses




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap