当前位置:首页 > 代码·功能杂七杂八 > 正文

直接在 CSS 中引用 FONTAWESOME 图标

fontawesome

前段时间小幻想在站点内引用一下FONTAWESOME 的图标,不过看样子好像是要加载一下官方的CSS才可以,于是只好下载了官方CSS,不过看了下,原来那货就是在CSS中加载了一个字体,再给那些矢量字体(即FONTAWESOME 图标)编码赋予值,那么,我就呵呵呵了…

首先CSS中加载一下字体文件,然后,下面的就可以搞定了(当然,哪天微软默认带着FONTAWESOME 字体那就不需要了)

所以,小幻果断不用 Fontawesome 提供的类,只想在 css 里面引用图标,可以这样子,其余请自行脑补:

.icon:before {
    content: '\f007';
    font-family: FontAwesome;
}

编码就附上和官方CSS想对应的值,下表 (点击下一页)

关于加载FONTAWESOME字体

	@font-face {
	font-family:'FontAwesome';
	src:url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.eot?v=4.1.0);
	src:url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.eot?#iefix&v=4.1.0) format('embedded-opentype'),url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.woff?v=4.1.0) format('woff'),url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.ttf?v=4.1.0) format('truetype'),url(http://static.ihuan.me/wp-content/themes/CKoo/fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular)format('svg');
	font-weight:normal;
	font-style:normal
}

字体源是小幻的,可以自己通过下载,保存!

废话:最后说一下那个引用图标的那个东东吧   http://ihuan.me/shuo 碎言碎语~~~

分页阅读: 1 2 下一页
标签:
上一篇: 下一篇:

8 条评论

评论加载中...
  1. 5楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    Always ヾ smile゛  

    现在有个那个 阿里妈妈字体库还不错!

    2015年12月30日 21:24 评论
    • 小幻  

      没用个诶

      2016年1月1日 14:56 评论
  2. 4楼
    来自天朝的朋友 谷歌浏览器 Windows 7
    锋子  

    原来还能这么折腾?

    2015年6月5日 11:35 评论
    • 幻殺あ殤璃  

      折腾无止境

      2015年6月5日 13:00 评论
  3. 地板
    来自天朝的朋友 谷歌浏览器 Windows XP
    boke123导航  

    刚开始我也挺喜欢折腾这个字体符号的,现在都懒了

    2015年6月4日 14:04 评论
    • 幻殺あ殤璃  

      要有活力~~~

      2015年6月5日 12:59 评论
  4. 板凳
    来自天朝的朋友 火狐浏览器 Windows 7
    威客百科  

    字体样式是什么设置的

    2015年6月4日 10:16 评论
  5. 沙发
    来自天朝的朋友 谷歌浏览器 Windows XP
    寇玉鑫博客  

    不管风来雨去,到幻杀博客报到是必须地, :cy: ,顺便提高曝光率~~打卡时间:上午10:24:40

    2015年6月3日 10:24 评论

发表评论

不理你。不要啊!吃饭。吃惊。吃西瓜。飞吻!恭喜!Hi纠结!膜拜!OK抛媚眼。泡泡糖。抛钱。忍!生闷气!调皮。偷看。委屈。献花。疑问?抓狂!

小提示:Ctrl+Enter快速提交助您一臂之力~
加载中……