css中怎样使用字体图标

在编写网页时，在页面中使用符号、标志、图标等设计元素非常常见，比如我们常见的五角星评级、放大镜搜索图标等，这些元素可以更好地补充网页的设计效果，让页面更加美观和易用。
在往常，开发人员会使用图片或者iconfont等方式来解决这个问题，但是这些方式都不是很优秀。使用图片会降低页面性能，而iconfont因为使用字符方式，所以可以节约下载时间和带宽。
在CSS中，使用字体图标非常简单，它的引入方式和其他字体无异。我们可以使用@font-face将iconfont引入到页面中，就可以直接在CSS中使用了。
下面就是一个简单的例子：

@font-face {
 font-family: 'iconfont';  /*字体名称*/
 src: url('./iconfont.ttf');   /* 字体文件所在的路径 */
}

.icon {
 font-family:"iconfont";//字体名称
 font-size:20px; //设置字体大小  
 color:#ff0000; //设置字体颜色
}

<p class="icon"></p> 

这个例子中，我们声明了一个名为iconfont的字体文件，包括iconfont.ttf的文件路径，然后我们定义了一个CSS类名为icon，它的字体大小是20px，颜色是红色，它还具有一个属性font-family，当我们需要使用字体图标时，在HTML标签的类名中添加icon，然后使用字体图标的Unicode编码即可，如上例中是。
总而言之，在编写网页时使用字体图标是一种优秀的解决方案，它不仅能提高性能，同时提供更加灵活的设计效果，也让开发人员的工作更加简单。