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

直接在 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. 50楼
    Canada 谷歌浏览器 Windows 7
    55printing.com  

    Good day! Would you mind if I share your blog with my myspace group?
    There’s a lot of people tat I think would really enjoy
    your content.Please let me know. Many thanks

    2018年7月19日 20:28 评论
  2. 49楼
    Canada 谷歌浏览器 Windows 7
    55printing.com  

    My spouse and I absolutely love your blog and find nearly all of your post’s to be exactly I’m looking
    for. Would you offer gujest writers too write content available for you?
    I wouldn’t mind writing a post oor elaborating on most of thee subjects you write about here.
    Again, awesome weblog!

    2018年7月19日 20:04 评论
  3. 48楼
    Canada 火狐浏览器5.0 Windows 7
    55Printing  

    Good day! I know this is kinda off topic however ,
    I’d figured I’d ask. Would you be interested in exchanging links or maybe guest
    authoring a blog article or vice-versa? My website discusses a lot of the same opics
    as yours and I believe we coulpd greatly benefit from each other.
    If you might be interested feel free to shoot me ann email.
    I lok forward to hearing from you! Excellent blog by the way!

    2018年7月19日 19:49 评论
  4. Hey, I think your website might be having browser comjpatibility issues.
    When I look at your blog site in Safari, it looks fine but when openijng in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that,
    very good blog!

    2018年7月19日 19:22 评论
  5. Hello vesry cool site!! Man .. Beautiful .. Amazing ..
    I will bookmark your website and take the feeds additionally?
    I am happy to seek out a lot of helpful info here in the submit, we need work
    out more strategies on this regard, thank yoou for sharing.
    . . . . .

    2018年7月19日 19:07 评论
  6. Thanks very interesting blog!

    2018年7月19日 19:00 评论
  7. 44楼
    来自天朝的朋友 火狐浏览器5.0 Windows 7
    chouqin  

    It is best to take part in a contest for among the best blogs on the web. I will suggest this site!

    2018年7月19日 15:45 评论
  8. I do not even know howw I stopped up right here, however I assmed tthis publish was once good.
    I do not realiz whho you’re but certainly you are going to a well-known blogger when you aren’t already.
    Cheers!

    2018年7月19日 10:36 评论
  9. 42楼
    Canada 火狐浏览器5.0 Windows 7
    55 printing  

    wonderful put up, veey informative. I’m wondering why the opposite specialists of this sector don’t rewalize this.

    You sgould proceed your writing. I am confident, you’ve a huge readers’
    base already!

    2018年7月19日 10:23 评论
  10. Have you ever tthought about writing an e-book or guest authoring
    on other sites? I have a bllog centerred onn the same ideas you discuss and would love to have you
    share some stories/information. I know my viewers would value
    your work. If you’re even remotely interested, ffeel free to send mme an email.

    2018年7月19日 10:13 评论

发表评论

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

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