前端字体图标的使用(阿里、icomoon)

阿里字体图标使用

  • 首先去阿里图标库官网:http://www.iconfont.cn/

  • 搜索需要的图标库 ——>加入购物车——>点击购物车——>添加到项目(如果有项目直接加入需要的项目,没有则新建项目)

    前端字体图标的使用(阿里、icomoon)_第1张图片

  • 在”图标管理” 中可以查看我的项目

前端字体图标的使用(阿里、icomoon)_第2张图片

  • 1、Unicode方式 在项目中进行使用

<html>
    <head>
        <meta charset="UTF-8">
        <title>字体图标使用title>
        <style>
            /*
             第一步:
               在样式里面申明字体
             * */
            @font-face {
                  font-family: 'iconfont';  /* project id 551814 */
                  src: url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot');
                  src: url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot?#iefix') format('embedded-opentype'),
                  url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.woff') format('woff'),
                  url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.ttf') format('truetype'),
                  url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.svg#iconfont') format('svg');
                }
            .iconfont{
                  font-family:"iconfont" !important;
                  font-size: 16px;
                  font-style: normal;
                  -webkit-font-smoothing: antialiased;
                  -webkit-text-stroke-width: 0.2px;
                  -moz-osx-font-smoothing: grayscale;
                }
        style>
    head>
    <body>
        <i class="iconfont">i>
    body>
html>
  • 2、Font class方式 在项目中进行使用
引入样式表
 <link rel="stylesheet" href="http://at.alicdn.com/t/font_619016_c52q8qlz6avsfw29.css">
使用

 <i class="icon iconfont icon-31dianpu">i>
 <i class="icon iconfont icon-gongnengjianyi">i>

这样就可以看到效果了!

前端字体图标的使用(阿里、icomoon)_第3张图片

注意:Unicode方式,当每次在图标库内加入新的标签时,需要重新copy 项目生成的在线链接@font-face,否则新的图标将会无效; Font class 在使用的时候要添加icon iconfont两个属性


icomoon字体图标使用

  • 首先去icomoon图标库官网:https://icomoon.io/app/#/select

  • 选择你需要的图标,同时页面会有其他的一些功能,自己可以摸索

前端字体图标的使用(阿里、icomoon)_第4张图片

选择完成后,会有selection(个数),同时点击 右边的Generate Font按钮进行下载

前端字体图标的使用(阿里、icomoon)_第5张图片

点击Download下载

  • 把压缩包里面的fonts拷贝到你的项目

  • 使用icomoon字体图标, 打开压缩包的demo.html,选择你需要的图标

    前端字体图标的使用(阿里、icomoon)_第6张图片


<html>

    <head>
        <meta charset="UTF-8">
        <title>title>
        <style type="text/css">
            @font-face {
                font-family: 'icomoon';
                src: url('../fonts/icomoon.eot?q0tv6r');
                src: url('../fonts/icomoon.eot?q0tv6r#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?q0tv6r') format('truetype'), url('../fonts/icomoon.woff?q0tv6r') format('woff'), url('../fonts/icomoon.svg?q0tv6r#icomoon') format('svg');
                font-weight: normal;
                font-style: normal;
            }

            [class^="icon-"],
            [class*=" icon-"] {
                /* use !important to prevent issues with browser extensions that change fonts */
                font-family: 'icomoon' !important;
                speak: none;
                font-style: normal;
                font-weight: normal;
                font-variant: normal;
                text-transform: none;
                line-height: 1;
                /* Better Font Rendering =========== */
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
            div{
                font-family: "icomoon";
            }
        style>
    head>

    <body>
        <div >div>
    body>

html>

注意:src: url地址与你的项目保持一致

  • 效果显示

前端字体图标的使用(阿里、icomoon)_第7张图片

你可能感兴趣的:(前端)