在线使用iconfont字体图标

Posted cowboybusy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在线使用iconfont字体图标相关的知识,希望对你有一定的参考价值。

登录https://www.iconfont.cn

把需要的图标加入购物车,然后加入项目

打开我的项目,生成代码

有3中方式使用图标

unicode和font class本质都是使用字体,好处在于兼容性好,可以像使用字体一样定义大小、颜色(单色),加粗,阴影等,不足在于不能使用多色图标(引用的多色图标也会变单色)

symbol:svg格式(xml描述的图片)图标,可以使用多色图标,兼容性现代浏览器

  • unicode方式

复制unicode的代码到模板代码的样式中,注意//前面加http:

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    @font-face 
        font-family: ‘iconfont‘;
        /* project id 1303894 */
        src: url(‘http://at.alicdn.com/t/font_1303894_e6bbqut2108.eot‘);
        src: url(‘http://at.alicdn.com/t/font_1303894_e6bbqut2108.eot?#iefix‘) format(‘embedded-opentype‘), url(‘http://at.alicdn.com/t/font_1303894_e6bbqut2108.woff2‘) format(‘woff2‘), url(‘http://at.alicdn.com/t/font_1303894_e6bbqut2108.woff‘) format(‘woff‘), url(‘http://at.alicdn.com/t/font_1303894_e6bbqut2108.ttf‘) format(‘truetype‘), url(‘http://at.alicdn.com/t/font_1303894_e6bbqut2108.svg#iconfont‘) format(‘svg‘);
    
    
    .iconfont 
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
    
</style>

<body>
    <i class="iconfont">&#xe7bc;</i>
</body>

</html>
 <i class="iconfont">&#xe7bc;</i>

class的名字可以自己定义

&#xe7bc;--图标的unicode标志

  • font class方式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1303894_e6bbqut2108.css">
    <title>Document</title>
</head>
<style>

</style>

<body>
    <i class="iconfont icon-chengshi"></i>
</body>

</html>
iconfont一定要加上,且名字不能变
icon-chengshi是图标对应的名字,要跟图标对应

  • symbol
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="http://at.alicdn.com/t/font_1303894_e6bbqut2108.js"></script>
    <title>Document</title>
</head>
<style>
    .icon 
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    
</style>

<body>
    <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-draw"></use>
    </svg>
</body>

</html>

 

以上是关于在线使用iconfont字体图标的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序使用字体图标

微信小程序使用字体图标

iconfont 图标字体

iconfont字体图标导入到vue项目中

iconfont字体图标导入到vue项目中

iconfont图标应用