阿里iconfont引入方法

原文：iconfont的引入方法

 

第一步：使用font-face声明字体
@font-face {font-family: 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome、firefox */
url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
第二步：定义使用iconfont的样式
<pre>
.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;}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont"&gt;&amp;#x33;&lt;>

代码html

复制代码
复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>icon</title>
    <link rel="stylesheet" href="css/iconfont.css">
</head>
<style>
    i:nth-of-type(1){
        font-size: 100px;
        color: #333;
    }
    i:nth-of-type(2){
        font-size: 200px;
        color: #1a1a1a;
        line-height: 300px;
    }
</style>
<body>
    <i class="iconfont">&#xf00a5;</i>
    <i class="iconfont">&#xe601;</i>
    <i class="iconfont">&#xe6bf;</i>
    <i class="iconfont">&#xe659;</i>
</body>
</html>
复制代码
复制代码

css

复制代码
复制代码
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1471336647'); /* IE9*/
  src: url('iconfont.eot?t=1471336647#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff?t=1471336647') format('woff'), /* chrome, firefox */
  url('iconfont.ttf?t=1471336647') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1471336647#iconfont') format('svg'); /* iOS 4.1- */
}

.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;
}
.icon-nav:before { content: "\f00a5"; }
.icon-nav1:before { content: "\e601"; }
.icon-nav2:before { content: "\e608"; }
.icon-nav3:before { content: "\e6bf"; }
.icon-nav4:before { content: "\e659"; }
复制代码
posted @   a瑶池  阅读(2887)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
AI IDE Trae