WEB端如何引用ICONFONT,ICONFONT所有的引用方式

2024-05-31 0 181

一、如何下载iconfont图标。

在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比如我们选择其中的一个作为示例。

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

鼠标悬浮上后会出现三种选择:

1.添加入库:功能和淘宝中的购物车一样,可以添加多个图标进行操作。.

2.收藏:同样可以选择多个自己喜爱的图标放在”我的收藏”中,避免以后找不到。

3.下载图标:选择单个图标进行下载,可下载为SVG格式、PNG格式和AI格式。

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

下载的基本上都是压缩包的形式。解压后即可引入。下面我们了解一下如何引入inconfont图标。

二、如何引入iconfont图标

引入iconfont可以在线上引入和本地引入。

主要的引入方式有:icon单个引入(本地引入)、unicode引入、font-class引入、symbol引入。

1.ICON单个使用

用户直接下载SVG、AI、PNG格式的图标。然后在源码中直接引用。如<img src=””>

SVG格式则是:下载之后,推荐使用谷歌浏览器打开,右击,选择查看网页源代码。

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

选择<svg …>…</svg>的所有内容,进行复制。将代码粘贴到要显示的前端页面中,利用css可进行高宽的修饰等。

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

此种方式适合用在图标引用特别少,以后也不需要特别维护的场景。

  • 比如设计师用来做demo原型。
  • 前端临时做个活动页。
  • 当然如果你只是为了下载图标做PPT,也是极好的。

不过如果是成体系的应用使用,建议用户把icon加入项目,然后使用下面三种推荐的方式。

2.UNICODE引用(线上)

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

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

第一步:拷贝项目下面生成的font-face

点击添加至项目后自行创建一个项目,如demo。

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

复制代码粘贴至前端页面的<style></style>中。 // 前一定要加上 http:

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

第二步:定义使用iconfont的样式

.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;
}

第三步:挑选相应图标并获取字体编码,应用于页面

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

<i class="iconfont">&#xe625;</i>

示例代码如下:

<style>
     @font-face {
          font-family: 'iconfont';  /* project id 617401 */
          src: url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.eot');
          src: url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.eot?#iefix') format('embedded-opentype'),
          url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.woff') format('woff'),
          url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.ttf') format('truetype'),
          url('http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.svg#iconfont') format('svg');
        }
 
     .iconfont {
          font-family:"iconfont" !important;
          font-size:16px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body>
    <i class="iconfont">&#xe625;</i>
</body>

3.FONT-CLASS引入

font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。

与unicode使用方式相比,具有如下特点:

  • 兼容性良好,支持ie8+,及所有现代浏览器。
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。

第一步:引入iconfont.css文件:

引入css文件可以用线上也可以用本地的,本地的需要下载文件,线上引入可直接在项目中复制地址。

1.引入本地的iconfont.css文件

下载压缩包文件,解压,找到文件夹中的iconfont.css件

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

复制粘贴到本地项目的文件夹css中

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

然后在源代码的<style></style>上面,写link标签,引入外联样式表iconfont.css

<link rel="stylesheet" type="text/css" href="css/iconfont.css" rel="external nofollow"  rel="external nofollow" >

2.引入线上iconfont.css

找到自己创建的项目,找到font-class,复制代码到源代码中,引入外联样式表iconfont.css

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

第二步:挑选相应图标并获取类名,应用于页面

打开下载的压缩包文件夹,找到demo_fontclass.html,使用浏览器打开,复制所用图标的类名。粘贴至所用的页面代码中。

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

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

或者在项目中直接复制图标的类名:

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

示例代码如下:

<head>
    <!--引入线上css文件-->
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.css" rel="external nofollow" >
    <!--引入本地css文件-->
    <link rel="stylesheet" type="text/css" href="css/iconfont.css" rel="external nofollow"  rel="external nofollow" >
    <style>
    </style>
</head>
<body>
    <i class="iconfont icon-kefu"></i>
</body>
</html>

4.symbol引用

这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与上面两种相比具有如下特点:

  • 支持多色图标了,不再受单色限制。
  • 通过一些技巧,支持像字体那样,通过font-size,color来调整样式。
  • 兼容性较差,支持 ie9+,及现代浏览器。
  • 浏览器渲染svg的性能一般,还不如png。
  • Symbol引用也可以在本地或线上引用,参照font-class的引用方式即可。

第一步:引入iconfont.js文件:

引入本地iconfont.js文件

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

<script src="js/iconfont.js"></script>

引入线上iconfont.js文件

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

第二步:加入通用css代码(引入一次就行):

<style type="text/css">
 .icon { 
    width: 1em; 
    height: 1em; 
    vertical-align: -0.15em; 
    fill: currentColor; 
    overflow: hidden; 
} 
</style>

第三步:挑选相应图标并获取类名,应用于页面:

使用浏览器打开文件,找到图标的类名,并按下例格式引用到页面代码中:

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-kefu" rel="external nofollow"  rel="external nofollow" ></use>
</svg>

同font-class一样,也可以直接复制项目中的类名

WEB端如何引用ICONFONT,ICONFONT所有的引用方式

示例代码如下:

<head>
    <style type="text/css">
        .icon { 
            width: 1em; 
            height: 1em; 
            vertical-align: -0.15em; 
            fill: currentColor; 
            overflow: hidden; 
        } 
    </style>
</head>
<body>
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-kefu" rel="external nofollow"  rel="external nofollow" ></use>
    </svg>
    
    <!--本地引用js文件-->
    <script src="js/iconfont.js"></script>
     <!--线上引用js文件-->
    <script src="http://at.alicdn.com/t/font_617401_ecaofzzw91pxpqfr.js"></script>
</body>

使用以上方法,iconfont就可以显示在页面上啦!没显示?那就在看一遍。这可能是最全的引入iconfont的方法了!!

引用时出现显示的是方框,或者没有显示。原因是iconfont更新了新的图标,此时需要同时更新iconfont的链接。如果没有更新链接,那么就会造成引用不到的原因,然后就变成小方框了。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

优模板 建站知识 WEB端如何引用ICONFONT,ICONFONT所有的引用方式 https://www.youmuban.com/440.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务