zoukankan      html  css  js  c++  java
  • 字体图标

    首先,用代码编写字体图标之前新建文件夹pictonic然后添加以下几个文件(如下图所示)

    添加后引用这个文件<link rel="stylesheet" href="pictonic/css/pictonic.css">,添加文件只需引用font和css就可以了

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>字体图标</title>
    <link rel="stylesheet" href="pictonic/css/pictonic.css">
    <style>
    #div1{
    font-size: 50px;
    }
    #tubiao1{
    font-size: 20px;
    }
    #div2{
    font-size: 50px;
    }
    #tubiao2{
    color: blue;
    font-size: 20px;
    }
    #div3{
    font-size: 50px;
    }
    #tubiao3{
    color: chartreuse;
    font-size: 20px;
    }
    </style>
    </head>
    <body>
    <div id="tubiao1">字体图标</div>
    <div id="div1">
    <span class="icon-adb-captivate"></span>
    <span class="icon-adb-contribute"></span>
    <span class="icon-_x33_dsmax"></span>
    <span class="icon-adb-acrobat"></span>
    <span class="icon-adb-aftereffects"></span>
    </div>
    <br><br>
    <div id="tubiao2">浏览器图标</div>
    <div id="div2">
    <span class="icon-netlog"></span>
    <span class="icon-prog-erlang"></span>
    <span class="icon-brw-opera"></span>
    <span class="icon-brw-explorer"></span>
    <span class="icon-brw-firefox"></span>
    </div>
    <br><br>
    <div id="tubiao3">程序语言图标</div>
    <div id="div3">
    <span class="icon-prog-nodejs02"></span>
    <span class="icon-prog-php01"></span>
    <span class="icon-prog-dotnet"></span>
    <span class="icon-prog-java"></span>
    <span class="icon-prog-php02"></span>
    <span class="icon-html5-01"></span>
    <span class="icon-prog-csharp"></span>
    <span class="icon-css3-01"></span>
    <span class="icon-os-ios-dark"></span>
    <span class="icon-os-win-04"></span>
    <span class="icon-prog-ccplusplus"></span>
    <span class="icon-prog-vbnet"></span>
    </div>
    </body>
    </html>

    完成后是这个样子的:

  • 相关阅读:
    Linux-Zabbix 邮件报警设置
    CentOS6.7 防火墙规则(Iptables)
    CentOS7 防火墙规则 (firewalld)
    windows搭建代理服务器
    Linux服务器的远程IP限制
    利用shell脚本监控目录内文件改动
    CentOS 7, 升级python到3.x
    CentOS 7, Attempting to create directory /root/perl5
    变长参数表
    C语言预处理
  • 原文地址:https://www.cnblogs.com/kulowreidyql/p/5701913.html
Copyright © 2011-2022 走看看