Creating the HTML list

awk

You could use this using awk. First copy the site content in a text file. Then execute following script:

BEGIN {
    # set record separator to a space, file is split in records
    RS = " "
    # separate print variables using a double quote
    OFS = "\""
}
# if record (string in between spaces) is the word alias
$0 ~ "(alias)" {
    # skip this line and make sure line number isn't counted
    NR = NR - 1
    getline
}
# print if the record number is 1, 4, 7 (i.e. a symbol)
NR % 3 == 1 {
    print "<div class=", "col-md-4 col-sm-6 col-lg-3", ">"
    # $1 contains first field which is the entire record
    print "  <i class=", "fa fa-fw", ">" $1 "</i>"
}     
# print lines 2, 5...
NR % 3 == 2 {
    print "  " $1
}   
# analogous for lines 3, 6, 9 ...
NR % 3 == 0 { 
    # sub amp
    sub (/&/, "&amp;", $1)
    print "  <span class=", "muted", ">" $1 "</span>"
    print "</div>\n"
}

The comments should make the script clear. You can use it as following:

$ awk -f script.awk file

where file is the path to the file with the site content and script.awk contains above code.

Example usage:

$ awk -f script.awk file | head -n 11
<div class="col-md-4 col-sm-6 col-lg-3">
  <i class="fa fa-fw"></i>
  fa-adn
  <span class="muted">[&amp;#xf170;]</span>
</div>

<div class="col-md-4 col-sm-6 col-lg-3">
  <i class="fa fa-fw"></i>
  fa-align-center
  <span class="muted">[&amp;#xf037;]</span>
</div>

notepad

1. First remove all aliases from the file, look for

    (alias)
   

   and remove all occurrences (including the leading space).

2. Look for the following pattern in the file:

   (. )(fa[^ ]*)([^ ]*)
   

   this matches exactly one item from the list. Replace this with the following string:

    <div class="col-md-4 col-sm-6 col-lg-3">\r\n<i class="fa fa-fw">$1</i>\r\n$2\r\n<span class="muted">$3</span>\r\n</div>\r\n\r\n
   

   Here $i resembles the i-th group captured in the regex. A group is a regex in between ( and ). Perhaps you have to access the groups using \i if this doesn't work. The new replacement string becomes:

   <div class="col-md-4 col-sm-6 col-lg-3">\r\n<i class="fa fa-fw">\1</i>\r\n\2\r\n<span class="muted">\3</span>\r\n</div>\r\n\r\n
   

3. substitute the amps, look for & and sub by &

Creating Item List

Creating this list can be done from either the html list of the copied file. Both times you simply need to grab (fa[^ ])*. This can be done for the one-line file as follows:

1. Remove alias again (see above).

2. Search pattern:

   . (fa[^ ]*)[^ ]*
   

   and replace for \1\r\n or $1\r\n if that doesn't work.

Creating div lines

To create the div lines simply match (. fa[^ ]*[^ ]*) and replace it with \1\r\n or $1\r\n if the backslash doesn't work. This will place newlines after each div entry.