History: Use images instead of unicode characters.

chrome/browser/resources/history/history.css

Index: chrome/browser/resources/history/history.css
diff --git a/chrome/browser/resources/history/history.css b/chrome/browser/resources/history/history.css
index b2ce3e85f8df8e9db17d79e8e36b97f6df9e0740..a6d6dcfa02c8c87d9f5b58f7c4a0331cd4c85be6 100644
--- a/chrome/browser/resources/history/history.css
+++ b/chrome/browser/resources/history/history.css
@@ -236,6 +236,19 @@ html[dir='rtl'] .entry .title {
 }
 </if>
 
+#range-previous::before {

[Patrick Dubroy, 2013/02/07 18:49:24]

This should probably also be done with a background image. See how
chrome://settings puts the arrow on <select> items, for example.

+  -webkit-transform: rotate(180deg);
+  content: url('../triangle_small_right.png') no-repeat;
+  display: inline-block;
+  position: relative;
+}
+
+#range-next::before {
+  content: url('../triangle_small_right.png') no-repeat;
+  position: relative;
+  top: 1px;
+}
+
 .entry-box {
   background-color: none;
 }
@@ -265,6 +278,16 @@ html[dir='rtl'] .entry .title {
   background-size: 16px;
 }
 
+.site-arrow-button {
+  background: url('../triangle_small_right.png') no-repeat;
+  display: inline-block;
+  height: 12px;
+  left: 5px;
+  position: absolute;
+  top: 5px;
+  width: 12px;
+}
+
 .site-domain-arrow {
   -webkit-transition: -webkit-transform 300ms linear;
   color: #8F8F8F;