字体图标的使用

编辑: admin 分类: 电脑知识发布时间: 2023-06-14 来源:互联网

字体图标使用方法以阿里图标（需要注册，免费试用）为例，网址为：https://www.iconfont.cn/

进入阿里图标网站，登录后点击顶部导航菜单中的“素材库” => “图标库”。
然后在顶部搜索框中输入想要的图标，例如：购物车，选择一个图标，将光标移动到图标上，在弹出的对话框中选择“加入购物车”。
点击顶部菜单栏中的购物车按钮，进入购物车页面。
首次进入需要先添加项目，点击右侧菜单中的“添加项目”，创建一个新项目。
如果以前添加过项目，进入购物车后会提示“添加至项目”，选择已有项目或创建一个新项目。
进入项目后可以看到刚添加的图标，选择上面的图标格式，一般用“font class”。
将光标移动到图标上，在弹出对话框中选择复制代码，可以得到这个图标的类名（class）
点击上面的”查看在线链接“，将在线链接复制下来。格式是这样的：//at.alicdn.com/t/c/font_3964449_92cl1ylakf.css
然后再编辑器中外部样式文件中引入在线图标库：
```
@import url(//at.alicdn.com/t/c/font_3964449_92cl1ylakf.css
);
```
在新建的HTML文件中，添加一个span标签，为其 class 属性添加两个属性值： ”iconfont” 和 “icon-weixin“
```
<body>
<span class="iconfont icon-weixin"></span> 
</body>
```
完成后效果如下图：
效果不是太美观，字体图标本质是一种字体，可以用字体样式来设置其大小、颜色等样式
```
.icon-weixin{
font-size: 130px;
color: green;
}
```

13.最终效果：

【本文由：高防服务器ip http://www.558idc.com/gfip.html 复制请保留原URL】