アイコンサイト”iconic”の使い方を教えてください

今までwebアイコンのfontawsomeを使用していたのですが、
iconi　
chttps://useiconic.com/open
を使用しなければならないため使い方をいろいろと調べてはみたもののあまり情報がなく困っております。

現在試したものとしてはファイルをダウンロードし、2階層目？に（example/font）fontというファイルを入れて

svgもimgも表示されず、またほかに参考サイトもないため利用されたことのある方使い方を教えていただけますと幸いです。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>CookCamp</title>
7    <link rel="stylesheet" href="cookcamp.css">
8    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
9    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
10    <link href="font/css/open-iconic-bootstrap.css" rel="stylesheet">
11</head>
12
13<body>
14    <wrapper>
15        <header>
16            <img src="images/logo.png" class="headerLogo" alt="CookCamp">
17            <div class="carousel">
18                <div class="slider-normal">
19                    <div><img src="images/key_visual.jpg" alt="画像1"></div>
20                    <div><img src="images/key_visual2.jpg" alt="画像2"></div>
21                    <div><img src="images/key_visual3.jpg" alt="画像3"></div>
22                </div>
23            </div>
24        </header>
25        <article>
26            <div class="recipeWrap">
27                <div class="recipeWrapTitle">
28                    <img class="recipeTitleIcon" src="images/icon.png" alt="icon"><span><h3>新着レシピ</h3></span>
29                </div>
30                <div class="recipeWrapInner">
31                    <figure>
32                        <img src="images/image01.jpg" class="newRecipeImage" alt="季節の彩り野">
33                        <figcaption><a href="#modal01" class="show">季節の彩り野菜</a></figcaption>
34                    </figure>
35                    <figure>
36                        <img src="images/image02.jpg" class="newRecipeImage" alt="簡単野菜のスープ">
37                        <figcaption><a href="#modal02" class="show">簡単野菜のスープ</a></figcaption>
38                    </figure>
39                    <figure>
40                        <img src="images/image03.jpg" class="newRecipeImage" alt="ヘルシー米粉パン">
41                        <figcaption><a href="#modal03" class="show">ヘルシー米粉パン</a></figcaption>
42                    </figure>
43                    <figure>
44                        <img src="images/image04.jpg" class="newRecipeImage" alt="ぷりぷりエビ料理">
45                        <figcaption><a href="#modal04" class="show">ぷりぷりエビ料理</a></figcaption>
46                    </figure>
47                </div>
48                <div id="modal01" class="recipeShow">
49                    <img src="images/image08.jpg" alt="">
50                    <p>様々な食材を使用し作り上げた色とりどりの前菜はテーブルをカラフルに彩ります♪</p>
51                    <button class='share' dish="イタリアン"><span class="oi oi-external-link"></span>シェア</button>
52                </div>
53                <div id="modal02" class="recipeShow">
54                    <img src="images/image09.jpg" alt="">
55                    <p>柔らかく蒸したあとはホイッパーで混ぜるだけの簡単レシピです♪かぼちゃは、ビタミンやミネラルが豊富なので美容や冷え性に良いですよ♪</p>
56                    <button class='share' dish="フレンチ">シェア</button>
57                </div>
58                <div id="modal03" class="recipeShow">
59                    <img src="images/image10.jpg" alt="">
60                    <p>米粉を使ったさっくりとした軽い食感のパンです♪米粉は日本の主食のお米で作られており、ヘルシーで口当たりもいいですよ♪</p>
61                    <button class='share' dish="ダイエット">シェア</button>
62                </div>
63                <div id="modal04" class="recipeShow">
64                    <img src="images/image11.jpg" alt="">
65                    <p>エビがサラダやスープ、ごはんなどに入っていると、テンションが上がりますよね♪ただ、エビは意外に調理が難しいという声も...。実はあるテクニックを使うだけでエビがプリップリに仕上がっちゃうんです♪</p>
66                    <button class='share' dish="エスニック">シェア</button>
67                </div>
68                <img src="/open-iconic/svg/external-link.svg">
69                <svg viewBox="0 0 8 8"><use xlink:href="#external-link"></use></svg>
70                <span class="oi" data-glyph="external-link"></span>
71                <span class="oi oi-external-link"></span>
72                <span class="fi-external-link"></span>
73        </article>
74        <footer>
75            <small>copyright&copy; CodeCamp All Rights Reserved.</small>
76        </footer>
77    </wrapper>
78    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
79    <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js" integrity="sha256-DHF4zGyjT7GOMPBwpeehwoey18z8uiz98G4PRu2lV0A=" crossorigin="anonymous"></script>
80    <script type="text/javascript">
81        // カルーセルにするセレクタを指定する
82        $('.slider-normal').slick({
83            // ここに slick のオプションを指定
84            dots: true,
85            autoplay: true,
86            autoplaySpeed: 2000,
87        });
88    </script>
89    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/css/modaal.min.css"/>
90    <script src="https://cdn.jsdelivr.net/npm/modaal@0.4.4/dist/js/modaal.min.js" integrity="sha256-e8kfivdhut3LQd71YXKqOdkWAG1JKiOs2hqYJTe0uTk=" crossorigin="anonymous"></script>
91    <script type="text/javascript">
92        $('.show').modaal('close');
93        
94        $('.share').on('click',function(){
95            alert($(this).attr('dish')+'のレシピをシェアしました♪');
96        })
97    </script>
98
99</body>
100</html>
101