首页 > 编程知识 正文

bootstrap icon标,bootstrap小标的类名

时间:2023-05-04 03:03:58 阅读:260721 作者:3209

目标:
1、生成图标的方法
2、使用图标

1、准备知识 bootstrap的图标大小是12*12photoshop cs 6 (修改图标大小)eclipse (可选,方便工具) 2、图从哪里来?

推荐如下网址图标
1. fontawesome (用的最广泛的)
2. famfamfam (很多颜色丰富图标)
3. fontello
4. icomoon (自定义图标)
目前觉得有两种图标:svg格式和png格式,对于svg格式,我一脸懵逼,有时间弄懂,或有朋友知道svg格式如何添加到bootstrap请告知。这里只想说png格式图标如何自定义,然后bootstrap中使用(当然不限bootstrap框架,其他也是可以用的)

3、png图标下载下来

推荐使用 famfamfam 作为测试下载一个png的文件夹的图标,不过这里图标的大小为16*16大小,需要转换成12*12
这里采用Photoshop进行批量修改大小,(其实这里类似Excel 录制宏的概念)
笔者采用是Photoshop cs 6
1. 打开ps之后菜单栏——》窗口–》动作(弹出动作面板框)
2.
3. 开始执行一次修改图片大小动作:图像–》图像大小–》修改成12*12–>确定
4.
5. 开始批处理菜单栏:文件–》自动–》批处理 -》弹出一个框
6.

参考:PS怎么批量处理图片大小?

4、将一个个png变成一张大图

你可以打开如下网址:png变成整图

4.1、将需要拼成整图png组合在一起

4.2、最后点击download

5、将下载图片和txt文件修改后缀为css

将它引入到工程中,注意默认png和样式文件是在同一目录下,你可以修改样式文件url路径来改变样式文件放置合适目录下。
打开样式文件进行修改:

5.1、使用方式

非常类似 bootstrap本身的图标使用类似

5.2、效果


虽然丑了一点,算给弄出来了。

6、参考 fontawesome (用的最广泛的)famfamfam (很多颜色丰富图标)fontelloicomoon (自定义图标)PS怎么批量处理图片大小?png变成整图

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。