欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

从零开始前端学习[25]:万一你没有UI美工的时候，就要选择阿里矢量图了

程序员文章站 2024-02-18 17:07:34
...

万一你没有UI美工的时候，就要选择阿里矢量图了

  • 如何在前端工程中使用阿里矢量图
    本地引用
    网络引用

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041

本地引用

  • 打开阿里图标官网http://www.iconfont.cn/plus 注册登录
  • 选中需要的图标，然后添加到购物车中
  • 点击下载代码

  • 引入iconfont的css

     <link rel="stylesheet" type="text/css“  href="font/iconfont.css">

  • 设置class属性

    <i class="iconfont icon-weixin1"></i>

  • 设置样式

    <i class="iconfont icon-weixin1" style="font-size: 30px; color: red;"></i>

根据上述步骤，截图如下所示:
一：添加矢量图:
从零开始前端学习[25]:万一你没有UI美工的时候，就要选择阿里矢量图了
二下载代码
从零开始前端学习[25]:万一你没有UI美工的时候，就要选择阿里矢量图了

三：解压到本地，然后引入项目

从零开始前端学习[25]:万一你没有UI美工的时候，就要选择阿里矢量图了

四：在项目中去引入css的样式

  <link rel="stylesheet" href="iconfont/iconfont.css">

五:设置class属性和style样式 

<p><i class="iconfont icon-qq" style="font-size: 30px; color: red;"></i>QQ</p><!--图标的样式最好写在行内-->
        <p><i class="iconfont icon-icon-" style="font-size: 30px; color: green;"></i>微信</p>
        <p><i class="iconfont icon-shoucangjia" style="font-size: 30px; color: blue;"></i>收藏夹</p>   
        <p><i class="iconfont icon-qinggan" style="font-size: 30px; color: deeppink;"></i>情感</p>

详细的代码如下所示:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <link rel="stylesheet" href="iconfont/iconfont.css">
  <link rel="stylesheet" href="http://at.alicdn.com/t/font_396776_9d9n9vwpn3sj1yvi.css">
  <style>
    body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
    ul,ol{margin: 0; list-style: none; padding: 0;}
    a{ text-decoration: none; }
    *{ margin: 0; padding: 0; }
    .main{
        width: 200px;
        margin: 100px auto;
    }
    p{
        margin-bottom: 20px;
    }
    /*
        阿里矢量图的引用
        1. 下载阿里图标，解压，名字改为iconfont
        2. 引入iconfont.css
        3. 打开demo_fontclass.html 找到对应图标的类名
        4. 给i标签类名，首先iconfont是必须给的，然后空格接上后面的在demo_fontclass.html找到的对应的图标的类名
    */
  </style>
 </head>
 <body>
    <div class="main">
        <p><i class="iconfont icon-qq" style="font-size: 30px; color: red;"></i>QQ</p><!--图标的样式最好写在行内-->
        <p><i class="iconfont icon-icon-" style="font-size: 30px; color: green;"></i>微信</p>
        <p><i class="iconfont icon-shoucangjia" style="font-size: 30px; color: blue;"></i>收藏夹</p>   
        <p><i class="iconfont icon-qinggan" style="font-size: 30px; color: deeppink;"></i>情感</p>    
    </div>
 </body>
</html>

显示的效果也如下所示:

从零开始前端学习[25]:万一你没有UI美工的时候，就要选择阿里矢量图了

对于具体的使用，其实在下载的代码里面已经有了demo了，可以参考里面的demo具体操作即可

网络引用

  • 生成http域名地址并引入

    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_uj101bok759afw29.css">

  • 复制图标类名并设置class属性

    <p><i class="iconfont icon-weixin1" ></i>微信</p>

  • 设置样式

     <i class="iconfont icon-weixin1" style="font-size: 30px; color: red;"></i>

与前面本地加载的方式一样，不过如果是在线的话，这个时候就需要在线创建项目:
一:在线创建项目:
从零开始前端学习[25]:万一你没有UI美工的时候，就要选择阿里矢量图了

二:生成在线样式的css样式:
从零开始前端学习[25]:万一你没有UI美工的时候，就要选择阿里矢量图了

三：通过link来进行引用:

 <link rel="stylesheet" href="http://at.alicdn.com/t/font_396776_9d9n9vwpn3sj1yvi.css">

四：在类的使用和style样式的设置上面的话，是和本地加载是一模一样的，所以不做任何解释了

总结：

从上面的可以看到，前端中使用矢量图的话，分成三个步骤:

  • 引用
  • 设置class类选择器

  • 设置css的style样式

    注意事项:

  • 矢量图是通过i标签来进行设置的

  • 标签类似行块级标签，矢量图支持font-size;color;等属性，支持文字属性样式
相关标签： 阿里矢量图引用 引用阿里图标

上一篇： ACCESS数据库向MySQL快速迁移小程序_MySQL

下一篇： 创建类和对象

推荐阅读