SEE Conf 2021!  支付宝体验科技大会

IcoMoon+@font-face+Sass制作Icons

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

自从CSS3的@font-face属性的出现,使用@font-face制作ICON变得越来越流行,使用的频率也越来越高,在很多网站上都能见到他们的影子。随着IcoMoon的在线生成工具的出现,可以使用IcoMoon制作自己你自己的ICON。具体如何使用,就不在此处详细介绍了,有兴趣的同学可以点击这里

今天阅读了jaydenseric写的《FUN WITH SASS & FONT ICONS》教程,介绍了如何使用Sass和@font-face结合制作字体图标。实在是强大而又有意思,自己动手操作了一回,准备向大家介绍一下,我自己是如何使用IcoMoon@font-faceSass三者结合在一起,制作出自己需要的字体图标。

基本知识点

要轻松的理解后面的内容,大家还是需要具备一些基础知识:

其中IcoMoon工具主要作用是帮助你获得你需要的ICON的Web字体,以及图标对应的编码代号如\e000对应的类名为battery-low,指的是一个“电池”图标;而@font-face属性的作用主要是让你的项目中如何调用IcoMoon中得到的Web字体;Sass是让你改变CSS的处理方式(也就是预处理),通过Sass的一些函数和Mixin,让你制作ICON变得更加的简单。这部分也是这篇文章的主要亮点。

获取图标的Web字体

IcoMoon是一个非常方便的Web应用程序,让你创建你自己需要的图标。你可以直接在IcoMoon应用程序中选择你需要的图标,也可以从你的本地上传你自己设计的图标。有关于如何将你自己的图标制作成Web字体,如果你感兴趣,可以点击早前翻译的一篇文章《如何把你的图标转换成web字体》。为了节省时间,这里所介绍的图标,都是直接在IcoMoon应用程序中获取的。接下来简单的介绍一下获取图标字体的方法:

Step1

在你浏览器的地址栏中输入http://icomoon.io/app/,或者直击这里,打开IcoMoon应用程序:

IcoMoon+@font-face+Sass制作Icons

Step2

直接在应用程序中选择你自己需要的字体图标,此处选择的是"Stephen Hutchings"制作的“Typicons”图标,在Typicons图标系列中选择你自己喜欢的Icon,被选中的图标会呈橙色高亮状态:

IcoMoon+@font-face+Sass制作Icons

如果你在IcoMoon应用程序首屏处未找到自己喜欢的字体图标,可以点击"More ICon Sets"链接,进入IcoMoon字体图标库中:

IcoMoon</body></html>

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/fun-with-icomoon-sass-and-font-icons.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部