前端字体图标的使用（阿里、icomoon）
程序员文章站
2022-05-25 19:05:51
...
阿里字体图标使用
首先去阿里图标库官网：http://www.iconfont.cn/
-
搜索需要的图标库 ——>加入购物车——>点击购物车——>添加到项目（如果有项目直接加入需要的项目，没有则新建项目）
在”图标管理” 中可以查看我的项目
- 1、Unicode方式 在项目中进行使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体图标使用</title>
<style>
/*
第一步：
在样式里面申明字体
* */
@font-face {
font-family: 'iconfont'; /* project id 551814 */
src: url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot');
src: url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.woff') format('woff'),
url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.ttf') format('truetype'),
url('//at.alicdn.com/t/font_551814_n3xx6j5s52n8kt9.svg#iconfont') format('svg');
}
.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;
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
- 2、Font class方式 在项目中进行使用
引入样式表
<link rel="stylesheet" href="http://at.alicdn.com/t/font_619016_c52q8qlz6avsfw29.css">使用
<i class="icon iconfont icon-31dianpu"></i>
<i class="icon iconfont icon-gongnengjianyi"></i>这样就可以看到效果了！
注意：Unicode方式，当每次在图标库内加入新的标签时，需要重新copy 项目生成的在线链接@font-face，否则新的图标将会无效； Font class 在使用的时候要添加icon iconfont两个属性
icomoon字体图标使用
首先去icomoon图标库官网：https://icomoon.io/app/#/select
选择你需要的图标，同时页面会有其他的一些功能，自己可以摸索
选择完成后，会有selection（个数），同时点击 右边的Generate Font按钮进行下载
点击Download下载
把压缩包里面的fonts拷贝到你的项目
-
使用icomoon字体图标， 打开压缩包的demo.html，选择你需要的图标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?q0tv6r');
src: url('../fonts/icomoon.eot?q0tv6r#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?q0tv6r') format('truetype'), url('../fonts/icomoon.woff?q0tv6r') format('woff'), url('../fonts/icomoon.svg?q0tv6r#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
div{
font-family: "icomoon";
}
</style>
</head>
<body>
<div ></div>
</body>
</html>注意：src: url地址与你的项目保持一致
- 效果显示
上一篇： 字体图标第三篇: 使用单个ttf字体