zoukankan      html  css  js  c++  java
  • 【css】最近使用的两种图标字体库

    ## 0. 前言

    比较基础的图标加载:<img src="x.png">和块元素的背景background: url(./x.png).

    页面多图标时,使用雪碧图(多个png压缩成一个png,定位来使用),减少图片所占空间。

    大屏显示,为保证图标清晰度,可以使用svg格式的图片。svg是矢量图,直接更改svg代码中path的fill改变颜色。

    可自编辑开源svg库 [http://www.iconfont.cn/home/index](http://www.iconfont.cn/home/index "阿里巴巴图标库")

    图标字体库,图标被生成字体文件,通过class决定图标,font-size决定大小,color决定颜色。主要使用的是css中伪类:before、css3中的@font-face,因而继承了font的其他规则。

    @font-face
    {
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
    url('Sansation_Light.eot'); /* IE9+ */
    }
    div
    {
    font-family:myFirstFont;
    }

    适用:单色图标

    ## 1. Font Awesome

    class="fa fa-name fa-size fa-pull-left" 前两个必有

    优点:开箱即用

    缺点:扩展麻烦,项目加载过多无用图标

    [http://fontawesome.dashgame.com/](http://fontawesome.dashgame.com/)

    ## 2. IcoMoon

    class="icon-name"

    优点:易于扩展,包括自己团队做的svg图标可在官网生成相应的fonts文件

    缺点:扩展更新,一旦出现问题,会影响项目其他图标的显示

    [https://icomoon.io/app/#/select](https://icomoon.io/app/#/select)

    ## 4. 深度理解

    扩展自己的图标库

    1. 扩展.eot.svg.ttf.woff等相关字体库

    2. 伪类

    .icon-name:before {
    content: "\f003";
    }

  • 相关阅读:
    delphi 如何让ScrollBox的内容与滚动条一起实时滚动
    C# Wpf集合双向绑定
    C# Wpf异步修改UI,多线程修改UI(二)
    C# 自定义线程修改UI(一)
    WPF FindName()查找命名注册的元素
    数据绑定
    WPF绑定Binding及模式
    WPF-Binding的源
    WPF-Binding对数据的检验
    WPF-数据转换
  • 原文地址:https://www.cnblogs.com/daaasheng/p/8538872.html
Copyright © 2011-2022 走看看