a.进入阿里巴巴矢量图标库www.iconfont.cn挑选所需的图标,加入购物车
b.点击网页中的购物车下载代码
unicode 是字体在网页端最原始的应用方式,特点是:
使用步骤如下:注意:新版 iconfont 支持多色图标,这些多色图标在 unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式
@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }
第二步:定义使用 iconfont 的样式
.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
第三步:挑选相应图标并获取字体编码,应用于页面
<span class="iconfont"></span>
完整代码:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </head> <body> <span class="iconfont"></span> </body> </html>
注意:css代码块中的 @font-face 内的 src: url('iconfont.eot'); 中的 url 即为之前准备阶段下载的源码文件夹下的对应文件,此处的完整代码的文件路径与 iconfont.eot 在同一目录下,若相应文件不在同一目录下请修改url参数。
实现效果:
font-class 是 unicode 使用方式的一种变种,主要是解决 unicode 书写不直观,语意不明确的问题。
与 unicode 使用方式相比,具有如下特点:
第一步:引入项目下面生成的 fontclass 代码(即为准备阶段下载的代码文件中的iconfont.css文件)重要!!!:
<link rel="stylesheet" href="./iconfont.css">
第二步:挑选相应图标并获取类名,应用于页面:
<span class="iconfont icon-setup"></span>
这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 svg 的集合,与另外两种相比具有如下特点:
font-size
, color
来调整样式。使用步骤如下:
<script src="./iconfont.js"></script>
<style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentcolor; overflow: hidden; } </style>
第三步:挑选相应图标并获取类名,应用于页面:
<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-setup"></use> </svg>
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title></title> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/iconfont-style.css" /> </head> <body> <a class="btn btn-lg btn-primary"><i class="icon icon-info"></i> more about</a> </body> </html>
iconfont-style.css
@font-face { font-family: 'iconfont'; src:url('../fonts/iconfont.eot?-8vg322'); src:url('../fonts/iconfont.eot?#iefix-8vg322') format('embedded-opentype'), url('../fonts/iconfont.woff?-8vg322') format('woff'), url('../fonts/iconfont.ttf?-8vg322') format('truetype'), url('../fonts/iconfont.svg?-8vg322#iconfont') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'iconfont'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* better font rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-user-female:before { content: "\e106"; } .icon-user-follow:before { content: "\e064"; } .icon-user-following:before { content: "\e065"; } 更多定义的icon此处省略........
引用的 fonts 目录下的文件:
效果图:
更多精彩的效果图展示:
如对本文有疑问, 点击进行留言回复!!
清除新版Google Chrome浏览器中表单控件(input,button...)默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错:Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导(一) --WHQL认证测试结果提交账号(一)
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论