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

直接在 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 下一页
标签:
上一篇: 下一篇:

96 条评论

评论加载中...
  1. wonderful submit, very informative. I’m wondering why the opposite experts of
    this sector do not understand this. You must proceed your writing.

    I am sure, you have a great readers’ base already!

    2018年7月13日 03:23 评论
  2. Hello, Neat post. There’s an issue wigh your site in internet explorer,
    could test this? IE still is the marketplace leader and a large section of people
    will omit your fantastic writing befause of this problem.

    2018年7月12日 12:24 评论
  3. Verry rapidly this site will be famous amid all blog visitors, due
    too it’s fastidious posts

    2018年7月12日 11:56 评论
  4. Heya are using WordPress foor your blog platform? I’m new to the
    blog world but I’m trying to get started and create my own. Do you require any html coding
    knowledge to make your own blog? Any help would be greatly appreciated!

    2018年7月12日 11:35 评论
  5. Pretty nice post. I simply stumbled upon your weblog and
    wanted to mention that I have truly loved surfing arond your weblog posts.
    After all I will be subscibing for your feed and I’m hoping you write
    onmce more soon!

    2018年7月11日 19:22 评论
  6. Thanks a bunch for sharing this with all people you really recognise what you are talking approximately!
    Bookmarked. Kindly additionally talk over with my web site
    =). We can have a limk alternate agreement among us

    2018年7月11日 18:19 评论
  7. Cool article! Interesting tips over here. It’s pretty worth enough for me. Personally, if all site owners and bloggers made good content as you did, the net will be a lot more useful than ever before.| I could not refrain from commenting. I ‘ve spent 3 hours searching for such informations. I will also share it with a couple of friends interested in it. I have just bookmarked this web. Right now with the work done, I going to find some Russia 2018 Cams. Gracias!!! Regards from WM 2018!

    2018年7月11日 17:13 评论
  8. 23楼
    来自天朝的朋友 火狐浏览器5.0 Windows 7
    chouqin  

    There’s noticeably a bundle to learn about this. I assume you made sure good points in features also.

    2018年7月11日 01:33 评论
  9. 22楼
    这家伙可能用了美佬的代理 Netscape Navigator Windows 7
    zishe  

    If some one needs to be updated with newest technologies after that he must
    be pay a quick visit this web site and be up to
    date all the time.

    2018年7月10日 21:53 评论
  10. 21楼
    这家伙可能用了美佬的代理 谷歌浏览器 Windows 7
    aura  

    Stunning story there. What happened after? Thanks!

    2018年7月10日 21:20 评论

发表评论

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

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