看了题目你可能会奇怪，这有什么不同吗？其实，这里只是两种不同的加载方式。
图标
第一种是图标，或者叫icon，加载的方式是通过系统搜索整个主题库来加载这一图标文件。很难懂？没关系，在/usr/share/icons/下面有很多的图标是吧，那咱们就来加载
face-smile。 
和上节课有神马不同呢： git diff Lesson_2 Lesson_3_Chapter_1
//…此处省略一些………
+const Gtk = imports.gi.Gtk;
@@ -17,7 +18,17 @@ ExampleIndicator.prototype = {
PanelMenu.Button.prototype._init.call(this, St.Align.END);
this.label = new St.Label({text:"This is Example"});
- this.actor.add_actor(this.label);
+ this.label.add_style_class_name('example');
+
+ //this.actor.add_actor(this.label);
+
+ this.iconTheme = Gtk.IconTheme.get_default();
+ this._icon = new St.Icon({ icon_type: St.IconType.SYMBOLIC,
+ style_class: 'popup-menu-icon',
+ icon_name: 'face-smile',
+ icon_size: 26
+ });
+ this.actor.add_actor(this._icon);
Main.panel._rightBox.add_actor(this.actor);
},
//…此处又省略一些………
iconTheme = Gtk.IconTheme.get_default()，这里是告诉GTK主题系统去寻找当前的主题。也就是「主题设置会影响你的图标显示」。用户换了一个主题，你的图标也有可能改变哦。
你可能要问，如果要添加自定义的图标路径怎么办呢？ 这也好办，跟Gtk主题说一声就行了： iconTheme.append_search_path (自定义的图标路径); St.Icon实例的基本组成：
- icon_type：图标类型，也就两种，全彩（正常的），象征性的（例子里用的）
- icon_name：图标的名字，这里我们挑了face-smile ：)
- icon_size:图标的大小，要注意这个大小指的高和宽同样的值，如下图
这里要注意图标的命名，如果你选择了象征性的图标，就要在图标文件名后面加上"-symbolic"这样的后缀，例如：face-smile- symbolic.svg 这样加载图标确实很方便，特别是系统本身自带的那些图标上，但是要是加载图片时，总不可能把图片塞进主题里对吧。
CSS式加载图片
当然不只是换了个图片，让我们看看它和Chapter
1有神马区别。 git diff Lesson_3_Chapter_1 Lesson_3_Chapter_2
除了添加了一个新文件以外，实际上只有短短的8行：
+.example_icon{
+ background-image: url(pic/applications-science-symbolic.svg);
+ background-size: contain;
+ width:26px;
+ height:26px;
+}
+ //this.actor.add_actor(this._icon);
+ this._css_icon = new St.Bin({ style_class: "example_icon" });
+ this.actor.add_actor(this._css_icon);
如果你写过CSS，这些对你简直就是小儿科了。不过我还是想罗嗦一下：
首先我们添加了一个St.Bin(暂且把这当容器用吧)，然后给这货添加了一个"example_icon"的类。并在css里定义了这个类的表现形式，和第二课里做的其实差不多吧。这和图标式加载有些许不同，那就是Bin的大小不受父级元素控制哦。
其实加载图片还有两种方法，不过我都不推荐：
- Clutter.Texture.new_from_file，因为要考虑绝对路径的问题，而css可以考虑相对路径
- GdkPixbuf，actor不能接受这个实例，添加时要转换
当然你觉得好，你可以用哈～不过我觉得样式和程序分离是未来的设计趋势，再说了，CSS就是方便呗。
总结
本节我们学习了：
- 图标通过GTK主题系统加载
- 图片通过css加载
这样一来，大家就可以加载自己喜欢的GUI啦～