vue-cli 中如何使用阿里iconfont在线链接?

使用vue-cli做项目,并使用阿里iconfont的图标。
使用方式为fontclass。
已取得链接//at.alicdn.com/t/font_xxxx_xxxx.css

在项目中,如果将文件下载下来到本地,然后在main.js中import css,是正常使用的。
但是不知如何使用这个在线链接,
尝试过在main.js中import这个链接,
也试过在index.html中以原始的方式引入css,都不可以,
不知该如何使用?

补充:
在index.html中写作这样
<link rel="stylesheet" href="//at.alicdn.com/t/font_xxxx_xxxx.css">
无报错,图标会显示成方框
在mian.js中import则会提示我npm install这个地址,图标则完全不显示

在tempate中的使用“
<i class="iconfont el-icon-third-profile"></i>

阅读 4.6k
评论
    4 个回答
    • 1.5k

    换成htts试试

      显示成方框是因为你没有加载CSS文件进来,你看下控制台加载文件那里是不是加载失败了

        • 125

        在线比较推荐Symbol方式引入

        第一步:拷贝项目下面生成的symbol代码:
        //at.alicdn.com/t/font_xxxxxxxxx.js
        第二步:加入通用css代码(引入一次就行):
        <style type="text/css">

        .icon {
           width: 1em; height: 1em;
           vertical-align: -0.15em;
           fill: currentColor;
           overflow: hidden;
        }

        </style>
        第三步:挑选相应图标并获取类名,应用于页面:
        <svg class="icon" aria-hidden="true">

        <use xlink:href="#icon-xxx"></use>

        </svg>

          • 2
          • 新人请关照

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

            撰写回答

            登录后参与交流、获取后续更新提醒

            相似问题
            推荐文章