https://www.xuanmo.xin/794.html

[置顶] before伪类与阿里图标做的图标库

发布于 分类: 前端相关 70 5819

图标简介

看了bootstrap的一些源码,设计思路很好,对图标的写法是个好的方法,于是借鉴这个方法,用阿里图标和before做了一个常用的图标库,不用每次需要图标的时候在去做,直接引入css,调用class就好了,目前有360个小图标,用这个方法方便添加图标,方便自己维护,添加方便,class类名采用的单词都是百度现翻译的,错了的单词欢迎给我提出来,所有图标的class名在下边的链接里

在线css链接:https://www.xuanmo.xin/iconfont.css,直接引入,调用class即可

<link rel=”stylesheet” href=”https://www.xuanmo.xin/iconfont.css” />

源码下载:链接: http://pan.baidu.com/s/1i4OPzvf 密码: zw4q

下图为图标实现代码

iconfont

 

部分图标效果

图标与class演示

作者专栏:Xuanmo

前端爱好者,热爱前端开发,欢迎和我成为朋友。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

https://www.xuanmo.xin/wp-content/themes/xuan/expression.php
表情
贴图
表情加载中...

换一张

  • Bary 北京市石景山区 /崇文区联通

    回复

    你这个贴代码的功能依然不能带尖括号?我发的 < … > 被吃掉了。

    • Xuanmo 上海市杨浦区 电信

      回复

      @Bary 可以贴代码,你点那个代码按钮就可以贴

      • Bary 北京市石景山区 /崇文区联通

        @Xuanmo 我是点的代码按钮,但好像被过滤掉了,只有你发的是带 pre 和行号的。

      • Xuanmo 上海市杨浦区 电信

        @Bary 需要pre标签和code标签,点击按钮会自动生成对应的代码,标签中间填代码就ok

  • Bary 北京市石景山区 /崇文区联通

    回复

    就是 :before :after 的 content 只能沿水平方向显示,不能是垂直的。

    • Xuanmo 上海市杨浦区 电信

      回复

      @Bary what?不能垂直?

      • Bary 北京市石景山区 /崇文区联通

        @Xuanmo 就是排列只能

        :before :after

        而不能

        :before

        :after

      • Xuanmo 上海市杨浦区 电信

        @Bary 不是很明白这个是啥 /fadai

      • Bary 北京市石景山区 /崇文区联通

        @Xuanmo 我的意思是如果

        div:before{content: '★'}

        <div>abc</div>

        看到的是 ★abc

        想显示成


        abc

        就无能为力了。

      • Xuanmo 上海市杨浦区 电信

        @Bary 两个解决方法:一是让伪元素变成块级元素,二是两个标签;

        星星
        
        <div class="comment-case">星星</div>
        
        
        .comment-case{
          width: 100px;
          font-size: 20px;
          text-align: center;
        }
        .comment-case:before{
          content: "★";
          display: block;
        }
        
      • Bary 北京市石景山区 /崇文区联通

        @Xuanmo 学到了,我之前必须用 inline 所以没想过改 display。

        pre 的问题我是在它生成的标签里填的,我猜可能因为你用管理员账号回复所以没有被过滤掉,或者你登出用访客的方式回复一下试试。HTML 的基本玩法我还是会的呀。 /xiaoku

      • Xuanmo 上海市杨浦区 电信

        @Bary 恩,伪元素你把它当成普通标签用就好了,不过content属性是必须要的,不放内容为空就行,我试试代码这个问题

      • Xuanmo 上海市杨浦区 电信

        @Bary 还真是,管理员才可以回复代码 /xiaoku 以前没注意过

  • 憧憬点滴记忆 四川省成都市 电信

    回复

    我也是使用的这个图标库,但是在手机端就显示一个[X]

  • BanYuner 湖北省武汉市 电信

    回复

    我还是习惯使用SVG了,一个JS文件搞定,而且可以外链JS文件在阿里云,实时更新,站点不用做任何改变

    • xuanmo 上海市 铁通

      回复

      @BanYuner 我是直接拿阿里图标的在线链接的现在,js那种方法只能支持ie9+

      • BanYuner 湖北省武汉市 电信

        @xuanmo 以后我觉得这个应该就是主流了吧

      • xuanmo 上海市 铁通

        @BanYuner 这种支持多色图标,只要不用IE9以下都没什么问题,IE当然会被逐渐淘汰的

      • BanYuner 湖北省武汉市 电信

        @xuanmo 肯定的,随着Windows系统的不断更新,IE9应该是主流了

      • xuanmo 上海市 铁通

        @BanYuner 政府、银行还有一些企业大多数还停留在IE8

      • BanYuner 湖北省武汉市 电信

        @xuanmo 确实是这样的,国内的站点毕竟不会研发自己的浏览器,所以不愿意花精力去研发基于新浏览器了

      • xuanmo 上海市 电信

        @BanYuner 还需要时间

已经没有了!