zoukankan      html  css  js  c++  java
  • css3

    一些字体图标库的网站

    https://icomoon.io/app/#/select
    http://www.iconfont.cn/
    http://www.bootcss.com/
    http://www.bootcss.com/p/cikonss/

     以第一个链接网站里的字体为例

    选择自己需要图标,点击右下角下载下来

    继续点击右下角——点击下载

    然后下载的文件一般都是这几个基本部件

    把fonts文件夹复制到自己的项目中根目录中

    打开css文件

    把代码复制到自己的某个css文件中,然后html引用,重点注意红笔圈的地方,可以分别引用到单独html对应的css中

    配置路径信息——在css中找到font文件夹并找到文件夹下的字体文件

    设置图标样式,给个统一的类名,全局调用,比如我这里设置的所有的i标签给一个icon的类名

    类样式可以根据自己的项目写一些公共的

    我这里直接复制的腾讯课堂的代码过来都可以用,所以说代码这里大同小异,具体不同的可以利用图标的名字,设置不同的类名,再细调

    对应的图标类名,引到html图标标签的class处即可

    例如:

     我这里要用第一个message的图标,我在html中这样引用:

    另外我在css中设置其单独样式:

    好了,大功告成!

    对了,还有兼容ie老爷爷的问题呢,参考下边这两篇文章进行整理:

    font awesome ie7兼容问题:http://www.imooc.com/article/18185?block_id=tuijian_wz

    CSS Expression用法总结  :http://jungle330549598.blog.163.com/blog/static/16650655020121110115448568/

    -------------------------------------------------------------------------------------正经分割线!!!--------------------------------------------------------------------------------------------------------------------------

    声明:

      请尊重博客园原创精神,转载或使用图片请注明:

      博主:xing.org1^

      出处:http://www.cnblogs.com/padding1015/

  • 相关阅读:
    云通信
    PullToRefreshGridView上拉刷新,下拉加载
    数据库开源框架GreenDao的使用解析
    RxJava2.0的使用详解
    ButterKnife的使用详解
    Jquery设置完颜色后hover不生效的解决办法
    jquery使用css函数设置背景色无效解决办法
    SpringBoot如何返回页面
    如何创建一个SpringBoot多模块项目
    连接mysql报错java.sql.SQLException: The server time zone value '�й���׼ʱ��' is unrecognized...解决方法
  • 原文地址:https://www.cnblogs.com/padding1015/p/7264940.html
Copyright © 2011-2022 走看看