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

最新推荐文章于 2022-11-02 21:18:07 发布

^_^ 小小码nong

最新推荐文章于 2022-11-02 21:18:07 发布

阅读量1.1k

点赞数 2

分类专栏： # 1.从零开始挑战前端文章标签：阿里矢量图引用引用阿里图标

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78106989

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

万一你没有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>

根据上述步骤，截图如下所示:
一：添加矢量图:
这里写图片描述
二下载代码

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

这里写图片描述

四：在项目中去引入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>

显示的效果也如下所示:

这里写图片描述

对于具体的使用，其实在下载的代码里面已经有了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>

与前面本地加载的方式一样，不过如果是在线的话，这个时候就需要在线创建项目:
一:在线创建项目:
这里写图片描述

二:生成在线样式的css样式:
这里写图片描述

三：通过link来进行引用:

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

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

总结：

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

引用
设置class类选择器
设置css的style样式

注意事项:
矢量图是通过i标签来进行设置的
标签类似行块级标签，矢量图支持font-size;color;等属性，支持文字属性样式

^_^ 小小码nong

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[25]:万一你没有UI美工的时候，就要选择阿里矢量图了

万一你没有UI美工的时候，就要选择阿里矢量图了如何在前端工程中使用阿里矢量图本地引用网络引用提示博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041本地引用打开阿里图标官网http://www.iconfont.cn/plus 注册登录选中需要的图标，然后添加到购物车中点击下载代码引入iconfont的
复制链接

扫一扫

专栏目录