Google Material Design的图标字体版本
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">今天设计达人网<span style="color: black;">博主</span>为<span style="color: black;">大众</span>分享的是Material Design图标字体版，有了这个Web端上<span style="color: black;">运用</span>图标就更加方便了。</p><img src="https://p3-sign.toutiaoimg.com/4183/6252676429~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722927401&x-signature=fj2MFmX%2F3J%2F%2FEoLh2jzJK66mt10%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">除了多出图标字体素材外 ，还<span style="color: black;">举荐</span>了图标下载专题页，用户<span style="color: black;">能够</span><span style="color: black;">经过</span>这个页面对图标单个下载，<span style="color: black;">包含</span>SVG、PNG、图标字体，相当方便。</p>
<h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">运用</span>教程</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1. 打开Material icons下载页</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2. 选择要下载的图标 （<span style="color: black;">日前</span><span style="color: black;">不可</span>多选>_<）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.<span style="color: black;">选取</span>要下载的格式<span style="color: black;">就可</span></p><img src="https://p3-sign.toutiaoimg.com/4185/4500457541~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1722927401&x-signature=LTMjgc0MhFDMdDP3JeQyPYwkU%2BA%3D" style="width: 50%; margin-bottom: 20px;">
<h3 style="color: black; text-align: left; margin-bottom: 10px;">图标字体<span style="color: black;">运用</span>教程</h3>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【<span style="color: black;">办法</span>一】</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">STEP 1: 引入字体文件和样式文件，下面这个是直接引用google的字体托管文件，<span style="color: black;">倘若</span>国内<span style="color: black;">运用</span><span style="color: black;">意见</span>不要用托管的，会<span style="color: black;">拜访</span>慢，把字体下载到自己的服务器上，<span style="color: black;">仔细</span>看【<span style="color: black;">办法</span>二】</p><link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">STEP 2: HTML代码，在HTML标签上加入class=”material-icons”以及写上图标名<span style="color: black;">叫作</span><span style="color: black;">就可</span>，如下：</p><i class=”material-icons”>face</i><p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">【<span style="color: black;">办法</span>二】</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>你不想<span style="color: black;">运用</span>Google托管的CSS文件和图标字体，<span style="color: black;">能够</span>下载到本地。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">STEP 1: 下载字体文件到本地</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">STEP 2 : 为你的CSS引入字体</p>@font-face { font-family: Material Icons; font-style: normal; font-weight: 400; src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local(Material Icons), local(MaterialIcons-Regular), url(https://example.com/MaterialIcons-Regular.woff2) format(woff2), url(https://example.com/MaterialIcons-Regular.woff) format(woff), url(https://example.com/MaterialIcons-Regular.ttf) format(truetype); } .material-icons { font-family: Material Icons; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; width: 1em; height: 1em; line-height: 1; text-transform: none; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ font-feature-settings: liga; }<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">STEP 3: HTML代码</p><i class="material-icons">face</i>
回顾过去一年，是艰难的一年；展望未来，是辉煌的一年。 期待楼主的下一次分享！”
页:
[1]