myjian

.course-icon-box {
    float: left; 
    margin-right: 15px;
    width: 36px;
    height: 36px;
    font-size: 30px;
}

myjian

/// <reference path="../js/jquery-1.10.2.min.js"; />
/// <reference path="../js/knockout-3.0.0.js"; />

(function() {

    var products = ["Spegesild", "Rogede sild", "吳佳倫", "Nord-Ost Matjeshering", "Konbu", "簡名沅", "Inlagd Sill", 
                    "Ikura", "Guaraná Fantástica", "Gravad lax", "Escargots de Bourgogne", "Carnarvon Tigers", "Boston Crab Meat",  "Uncle Bob's Organic Dried Pears",
                    "Tofu", "Rössle Sauerkraut", "Manjimup Dried Apples", "Longlife Tofu", "Tourtière", "Thüringer Rostbratwurst", "Perth Pasties", "Pâté chinois",
                    "Mishi Kobe Niku", "Alice Mutton", "Wimmers gute Semmelknödel", "Tunnbröd", "Singaporean Hokkien Fried Mee", "Ravioli Angelo", "Gustaf's Knäckebröd",
                    "Gnocchi di nonna Alice", "Filo Mix", "Steeleye Stout", "Sasquatch Ale", "Raclette Courdavault", "Queso Manchego La Pastora", "Mozzarella di Giovanni",

myjian

<div class="list-content" data-bind="if: announcementList.rendered, visible: announcementList.listVisible">
    <div class="search-wrapper" data-bind="dxTextBox: { placeholder: 'Search', mode: 'search', value: announcementList.searchQuery, valueUpdateEvent: 'keyup' } "></div> 
    <!-- ko with: announcementList -->
    <div class="list-indentation" data-bind="dxList: {dataSource: dataSource, searchQuery: searchQuery}">
        <div data-options="dxTemplate : { name: 'item' } " >
            <div>
                <div class="course-icon-box">
                    <span data-bind="text: Course.substr(0, 1);"></span>
                </div>
                <div>