zoukankan      html  css  js  c++  java
  • css: 使用unicode方式引入iconfont图标

    Unicode 是字体在网页端最原始的应用方式,特点是:

    • 兼容性最好,支持 IE6+,及所有现代浏览器。
    • 支持按字体的方式去动态调整图标大小,颜色等等。
    • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。

    注意:新版 iconfont 支持多色图标,这些多色图标在 Unicode 模式下将不能使用,如果有需求建议使用symbol 的引用方式

    在需要引用的样式里复制代码:

    @font-face {
        font-family: 'iconfont';
        src: url('//static.fczx.com/www/assets/font/iconfont.eot');
        src: url('//static.fczx.com/www/assets/font/iconfont.eot?#iefix') format('embedded-opentype'), 
        url('//static.fczx.com/www/assets/font/iconfont.woff2') format('woff2'), 
        url('//static.fczx.com/www/assets/font/iconfont.woff') format('woff'), 
        url('//static.fczx.com/www/assets/font/iconfont.ttf') format('truetype'), 
        url('//static.fczx.com/www/assets/font/iconfont.svg#iconfont') format('svg');
    }
    
    .iconfont {
        font-family: 'iconfont';
        display: inline-block;
        text-align: center;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    @font-face {
      font-family: "iconfont logo";
      src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
      src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
        url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
        url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
        url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
    }
    
    .logo {
      font-family: "iconfont logo";
      font-size: 160px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    Nginx跨域设置:

    location / {
                root   D:codestatic;
                index  index.html index.htm;
                add_header Access-Control-Allow-Origin *;
            }

    html使用:

    <i class="iconfont">&#xeb97;</i>
  • 相关阅读:
    ASP.NET2.0 Provider模型
    平时可以上一上的SQL Server的网站
    有关SQL server connection KeepAlive 的FAQ(1)
    有关SQL server connection Keep Alive 的FAQ(2)
    使用C#的is和as操作符来转型
    BlogEngine学习系列
    复习asp.net form验证
    C#学习之动态化dynamic
    Altium Designer(Protel)网络连接方式Port和Net Label详解
    Altium Designer生成Gerber文件和钻孔文件的一般步骤
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13359435.html
Copyright © 2011-2022 走看看