これはとても素晴らしいことなんだけど、残念ながらこの中に私が使いたいアイコンがない。
本とは画像を挿入すればいいと思ってたんだけど、
「みんくすのぐーぶろ」と言うサイトの「簡単6ステップ！オリジナルアイコンフォントの作り方」と言うサイトを読んでいるうちに
自分で好みのicon font を作ってやりたいと言う思いがムクムクと湧いてきた。
でも、私の場合は単にHTMLで書いているわけではないので、せっかくオリジナルのフォントを作っても使えないかもしれない。
なので、とりあえず「簡単6ステップ…」が紹介している icomoon.io と言うサイトにあるアイコンをダウンロードして、果たしてこれが Joomla! の中でうまく機能するかどうか確かめてみることにした。
まず、指示されているように IcoMoon にアクセスして、これまた書かれているように使ってみたいアイコンを選択し、ダウンロードした。
その後、具体的にサイトに表示させるまでに何をするかについては「Web 制作・運用 Tips アーカイブ」のアイコンフォントの具体的な使い方 - IcoMoon App の”ダウンロードしたファイルをディレクトリに配置する”以降を参考にして、Joomla の使用テンプレート内にあるフォルダーに順次 css フォルダーにstyle.css(icomoon.css に改名)を、font ディレクトリの中に新しく moon フォルダを作ってフォントファイルをアップロードし、（すでにfont フォルダ内に同様の名前のファイルがあったので大事をとってのことです。。）それに合わせて、リンクを修正した。
また、「具体的な」にあるように、CSSをインクルードするlink タグを</head>の前に挿入した。
それで IcoMoon でダウンロードしてきた demo.html を参考にしながら、それを表示させたいホームページにhtml タグを書いた。
だけど、ここで問題発生💦
私はホームページのレイアウトにQuix-Pages と言う者を使っているんだけど、どういうわけか<span class="xxxxx"></span> と言うタグを受け付けない！
html の編集からいくらこのタグを挿入しても、保存されずに消えてしまう😱
でも、このシステムを使ってない他のページで試すと、ちゃんとicon font が出るので私のやったことは基本的には正しいはずなんだけど。。。。。
やっぱり画像にするしかないのか・・・とあきらめかけながら、「具体的な」に目を泳がせていると、「アイコンをテキストとして文章に挿入する」と言うもう一つの方法が書かれているのが目に入った。
それは Unicode を挿入すると言う方法で
demo に出てくる e600 e601 などのコードを挿入してフォントを出すという方法だった。記入方法は
<span style="font-family: icomoon;">   </span>
と言うものだ。<span style >なら受け付けるのではないか、と一縷の望みをつないでやってみたら、
ホームページにもちゃんとアイコン・フォントが表示された。
同じようにアイコン・フォントを使いたい箇所は3か所あったので、いちいちスタイルをinline css で書くのも面倒なので、クラスをつけてまとめて形成することにした。
その際分かったことは、font-family に関してだけは inline で指定してやらないと表示されないということ。
でもそれ以外は external css でも問題なく反映された。
では、今度はいよいよオリジナル・アイコン・フォントを作ってみますかーーー！
0 件のコメント:
コメントを投稿