Bootstrapのサンプルプログラムから、Bootstrapのサンプルページを作成
参考: CSS　Twitter Bootstrap3で簡単レスポンシブWebデザイン　【第7回】 | エンジニア転職求人情報×IT人材紹介@SAK http://www.sakc.jp/blog/archives/33430
fontfile追加
app/assets/font/fonticon.eot
app/assets/font/fonticon.svg
app/assets/font/fonticon.ttf
app/assets/font/fonticon.woff
herokuで必要な記述を追記、今の時点ではコメントアウトしている
app/assets/stylesheets/ryan_pin.css.lessのfontfileのpathを変更

fontelloからDLしたディレクトリのcssフォルダの中のcssをコピーするだけだと、
fontfileの読み込みが失敗するので次のように変更

before src: url('../font/fonticon.eot');
after  src: url('/assets/fonticon.eot');
ryan_pin.css.lessを追加
app/assets/stylesheets/fonticon.css.scssの追加
fonticonの設定ファイル。
app/views/ryan_pin/index.html.erbを作成

Twitter Bootstrap サンプルサイト
http://www.sakc.jp/blog/wp-content/themes/Insignia/bootstrap3-samplesite/index.html
を参考に書いた。
/にアクセスされたらjantaku#indexを呼び出すように設定

app/config/routes.rbを編集

  root :to => 'jantaku#index'
  resources :yakus
  resources :ryan_pin
  resources :i_pin
views/jantaku/index.html.erbにryan_pinのpathを追加
views/ryan_pin/index.html.erb インデントをspace2つにした
app/assets/stylesheets/fonticon.css.scssに{right|left}.carousel-controlの設定のみを残した

.left.carousel-control:before{
    font-size: 36px;
    content: '\61';
    font-family: 'fonticon';
    padding: 5px;
}

.right.carousel-control:before{
    font-size: 36px;
    content: '\67';
    font-family: 'fonticon';
    padding: 5px;
}
cosmetic
やじるしの箇所に表示されていた図形を◯から□に変更した

app/assets/stylesheets/bootstrap_and_overrides.css.lessに追記。

.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 50px;
  margin-top: 0px;
  font-size: 60px;
  font-weight: 0;
  color: #fffb3f;
  text-align: center;
  border: 0px
  background: #000000
  opacity: 0.5;
  -webkit-border-radius: 0px;
  filter: alpha(opacity=50);
}

本当は図形を消したかったが消せなかった。