HTML中的iconfont使用

怼烎@ 2022-09-25 05:25 214阅读 0赞

之前遇到一个用iconfont的demo，这是第一次遇到iconfont，使用审查元素可以看到这是一种用字符表示图片的方法，而且放大或者缩小的时候不会失真，即具有矢量性，兼容性很好。于是上网查了一下这个东西，发现现在大多数网站都会使用iconfont，下面就分享一下图标字体的使用：

**1、先下载字体**

1.  **icomoon.io进入后点击IcoMoon.APP，选择自己想要的图标，然后点击下载![Image 1][]解压后，点击进入font**
2.  **http://iconfont.cn/阿里妈妈字体库**

**2、声明字体**

> > > @font-face \{font-family: "iconfont";
> 
> > > src: url('../fonts/iconmoon.eot'); /\* IE9\*/
> 
> > > src: url('../fonts/iconmoon.eot?\#iefix') format('embedded-opentype'), /\* IE6-IE8 \*/
> 
> > > url('../fonts/iconmoon.woff') format('woff'), /\* chrome, firefox \*/
> 
> > > url('../fonts/iconmoon.ttf') format('truetype'), /\* chrome, firefox, opera, Safari, Android, iOS 4.2+\*/
> 
> > > url('../fonts/iconmoon.svg\#uxiconfont') format('svg'); /\* iOS 4.1- \*/
> 
> > > \}

> **注意路径修改**

**3、使用字体**

**\[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;**
> 
> > **\}**
> 
> >   
> > 
> 
> >   
> > 
> 
> > **.icon-film:before \{** 
> 
> >  **content: "\\e913";**
> 
> > **\}**
> > 
> > 然后按普通class调用就行了
> > 
> >   
> > 
> > 
> > #### **注意：由于路径问题可能会显示不出来，试了好多最后也没解决，只能把css、html放在同一目录下才显示出来了，不知道还有没有其他方法，仅供参考** ####
> > 
> > **很幸运的纠结了一下午呵呵![尴尬][awkward.gif]**

[Image 1]: 
[awkward.gif]: /images/20220718/be8465553dc744d5addb8de9ec98fbb4.png