css 字体图标如何使用?

css 字体图标如何使用?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

一些字体图标库的网站

https://icomoon.io/app/#/select

http://www.iconfont.cn/

http://www.bootcss.com/

http://www.bootcss.com/p/cikonss/

以第一个链接网站里的字体为例

选择自己需要图标,点击右下角下载下来

1.png

然后下载的文件一般都是这几个基本部件

2.png

我们需要的是fonts文件夹和style.css。

把fonts文件夹复制到自己的项目中根目录中

3.png

打开css文件

4.png

把代码复制到自己的某个css文件中,然后,重点注意红笔圈的地方,可以分别引用到单独html对应的css中

5.png

配置路径信息——在css中找到font文件夹并找到文件夹下的字体文件

6.png

在页面中,我们只要给一个元素添加相应的类名就行,因为在style.css中已经将类名对应的图标写好了。

8.png

页面中添加如下类似元素:

<span class="icon-message"></span>

这样,我们的页面中就可以显示相应的图标了。

例如:

我这里要用第一个message的图标,我在html中这样引用:

9.png

另外我在css中设置其单独样式:

10.png

好了,大功告成!

11.png

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css 字体图标如何使用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏