Icon font
Icon font 指的是用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。
应用场景:
Icon Font的优缺点资源:
阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。
fontello 在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的。
可以在线导入的SVG格式字体,并进行编辑,然后下载来使用。
Font-Awesome
去哪儿图标库
使用:
假如现在我们想使用阿里icon font字库 中的12星座图标:
步骤1: 选中12星座图标,,下载到本地或者存储为在线项目
步骤2: 将以下选中的文件拷贝到项目文件目录下
步骤3: 在CSS文件中使用font-face声明字体,定义使用iconfont的样式
@font-face {font-family: “iconfont”; ), ), ), ); { font-family:”iconfont” !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;:::::::::::: “\3442”; }
步骤4: 挑选相应图标并获取字体编码,应用于页面
<i class=”icon iconfont”>㐽</i>
over 想进一步了解字体图标制作的朋友请移步 字体图标制作详解
渐渐少了联络,友谊就变的淡了,所以,抽点时间,联络朋友一起聊聊天,