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

Question

使用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>

Answer 1

换成htts试试

Answer 2

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

Answer 3

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

Answer 4

在线比较推荐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>