WeChat ミニ プログラムに組み込みアイコンと外部アイコンを導入して使用する方法についての簡単な説明
この記事では、WeChat アプレットの組み込みアイコンと外部アイコンの使用方法を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
関連する学習に関する推奨事項: ミニ プログラム開発チュートリアル
独自のアイコンが付いています
<view class="container"> <view class="icon-box"> <icon class="icon-box-img" type="success" size="93"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">成功</view> <view class="icon-box-desc">用于表示操作顺利完成</view> </view> </view> <view class="icon-box"> <icon class="icon-box-img" type="info" size="93"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">提示</view> <view class="icon-box-desc">用于表示信息提示；也常用于缺乏条件的操作拦截，提示用户所需信息</view> </view> </view> <view class="icon-box"> <icon class="icon-box-img" type="warn" size="93" color="#C9C9C9"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">普通警告</view> <view class="icon-box-desc">用于表示操作后将引起一定后果的情况；也用于表示由于系统原因而造成的负向结果</view> </view> </view> <view class="icon-box"> <icon class="icon-box-img" type="warn" size="93"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">强烈警告</view> <view class="icon-box-desc">用于表示由于用户原因造成的负向结果；也用于表示操作后将引起不可挽回的严重后果的情况</view> </view> </view> <view class="icon-box"> <icon class="icon-box-img" type="waiting" size="93"></icon> <view class="icon-box-ctn"> <view class="icon-box-title">等待</view> <view class="icon-box-desc">用于表示等待，告知用户结果需等待</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="success_no_circle" size="23"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">多选控件图标_已选择</view> <view class="icon-box-desc">用于多选控件中，表示已选择该项目</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="circle" size="23"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">多选控件图标_未选择</view> <view class="icon-box-desc">用于多选控件中，表示该项目可被选择，但还未选择</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="warn" size="23"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">错误提示</view> <view class="icon-box-desc">用于在表单中表示出现错误</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="success" size="23"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">单选控件图标_已选择</view> <view class="icon-box-desc">用于单选控件中，表示已选择该项目</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="download" size="23"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">下载</view> <view class="icon-box-desc">用于表示可下载</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="info_circle" size="23"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">提示</view> <view class="icon-box-desc">用于在表单中表示有信息提示</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="cancel" size="23"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">停止或关闭</view> <view class="icon-box-desc">用于在表单中，表示关闭或停止</view> </view> </view> <view class="icon-box"> <view class="icon-small-wrp"> <icon class="icon-small" type="search" size="14"></icon> </view> <view class="icon-box-ctn"> <view class="icon-box-title">搜索</view> <view class="icon-box-desc">用于搜索控件中，表示可搜索</view> </view> </view> </view>
Alibaba アイコン ライブラリ
ローカルにダウンロードした後、解凍すると、その中に iconfont.css というファイル名のフォルダーができますので、その内容を編集してコピーします
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1537179845858'); /* IE9*/
src: url('iconfont.eot?t=1537179845858#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
url('iconfont.ttf?t=1537179845858') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg?t=1537179845858#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-right:before { content: "\e601"; }
.icon-29:before { content: "\e61a"; }
.icon-chongzhi:before { content: "\e614"; }
.icon-guanyuwomen:before { content: "\e61f"; }
.icon-tixian:before { content: "\e649"; }
.icon-order-add:before { content: "\e747"; }
.icon-option:before { content: "\e60b"; }
.icon-guanliyuan:before { content: "\e600"; }
.icon-qianbao:before { content: "\e64a"; }
.icon-xuanxiang:before { content: "\e7ea"; }
.icon-Cash:before { content: "\e611"; } WeChat 開発者ツールを開き、app.wxss を見つけて、コピーした内容を下に貼り付けます。
wxml でアイコンを引用します。たとえば、icon-guanliyuan:before これは管理者アイコンです。
<icon class="icon-guanliyuan:before"></icon>
プログラミング関連の知識については、プログラミング教育をご覧ください。 ！
以上がWeChat ミニ プログラムに組み込みアイコンと外部アイコンを導入して使用する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7509
15
1378
52
78
11
19
63
Win11 でタスクバーのサムネイル プレビューを無効にする方法は? マウスを移動してタスクバー アイコンのサムネイル表示テクニックをオフにする
Feb 29, 2024 pm 03:20 PM
この記事では、Win11システムでタスクバーアイコンをマウスで移動したときに表示されるサムネイル機能をオフにする方法を紹介します。この機能はデフォルトでオンになっており、ユーザーがタスクバー上のアプリケーション アイコンの上にマウス ポインタを置くと、アプリケーションの現在のウィンドウのサムネイルが表示されます。ただし、一部のユーザーは、この機能があまり役に立たない、またはエクスペリエンスに悪影響を与えると感じ、オフにしたい場合があります。タスクバーのサムネイルは楽しい場合もありますが、気が散ったり煩わしい場合もあります。この領域にマウスを移動する頻度を考えると、重要なウィンドウを誤って閉じてしまったことが何度かある可能性があります。もう 1 つの欠点は、より多くのシステム リソースを使用することです。そのため、リソース効率を高める方法を探している場合は、それを無効にする方法を説明します。しかし
Ubuntuのスタートメニューのアイコンを削除するにはどうすればよいですか?
Jan 13, 2024 am 10:45 AM
Ubuntuのスタートメニューにはソフトウェアのアイコンがたくさん並んでいますが、見慣れないアイコンもたくさんありますが、それらを削除したい場合はどうやって削除すればよいのでしょうか？以下の詳細なチュートリアルを見てみましょう。 1. まず、ubuntu デスクトップに入り、左側のパネルの下にある [スタート] メニューをクリックします。 2. 中にテキストエディタアイコンがありますので、削除する必要があります。 3. デスクトップに戻り、マウスを右クリックしてターミナルを開きます。 4. コマンドを使用して、アプリケーション リスト ディレクトリを開きます。 sudonautilus/usr/share/applicationssudonautilus~/.local/share/applications5. 中にある対応するテキスト エディター アイコンを見つけます。 6.そのまま直進します
電話設定アイコンをデスクトップにダウンロードします。「数秒でわかる: Android スマートフォンでアプリのアイコンを変更する手順」
Feb 06, 2024 pm 04:27 PM
デスクトップを美しくするために、多くのユーザーはデスクトップのテーマを定期的に変更して新鮮さを保ちたいと考えています。ただし、テーマを変更してもサードパーティAPPのアイコンは変更されず、パーソナライズされた美化は十分に徹底されていません。同じアプリアイコンに飽きたら、アイコンを置き換えてください。理論的には、モバイル アプリのアイコンを変更したい場合は、通常、ROOT システムと、アイコンを解凍して置き換えるためのツールが必要です。しかし、大多数の携帯電話はもはや ROOT システムをサポートしていないため、ROOT システムを実現する他の方法を見つける必要があります。たとえば、一部の特定のアプリケーションでは、アイコンをカスタマイズしたり、サードパーティのランチャーを通じてアイコンをカスタマイズしたりするオプションが提供される場合があります。さらに、一部の携帯電話ブランドは、ユーザーがアイコンを選択および変更できるように、特別なテーマおよびアイコン ストアを立ち上げています。大手アプリストアでは、
T-mobile スマートフォンの 5G UC および 5G UW アイコンは何を意味しますか?
Feb 24, 2024 pm 06:10 PM
T-Mobile ユーザーは、携帯電話の画面上のネットワーク アイコンが 5GUC と表示されるのに、他の通信事業者では 5GUW と表示される場合があることに気づき始めています。これはタイプミスではなく、異なるタイプの 5G ネットワークを表しています。実際、通信事業者は 5G ネットワークのカバー範囲を継続的に拡大しています。このトピックでは、T-Mobile スマートフォンに表示される 5GUC および 5GUW アイコンの意味を見ていきます。 2 つのロゴは異なる 5G テクノロジーを表しており、それぞれに独自の特徴と利点があります。これらの標識の意味を理解することで、ユーザーは接続している 5G ネットワークの種類をより深く理解し、自分のニーズに最適なネットワーク サービスを選択できるようになります。 T の 5GUCVS5GUW アイコン
Xianyu WeChat ミニプログラムが正式に開始
Feb 10, 2024 pm 10:39 PM
Xianyu の公式 WeChat ミニ プログラムが静かに開始されました。ミニ プログラムでは、プライベート メッセージを投稿して購入者/販売者とコミュニケーションしたり、個人情報や注文を表示したり、商品を検索したりすることができます。プログラム、見てみましょう。 Xianyu WeChat アプレットの名前は何ですか? 回答: Xianyu、アイドル取引、中古品販売、評価、リサイクル。 1. ミニ プログラムでは、アイドル メッセージの投稿、プライベート メッセージを介した購入者/販売者とのコミュニケーション、個人情報と注文の表示、指定された商品の検索などができます。 2. ミニ プログラム ページには、ホームページ、近くに、アイドル投稿、メッセージ投稿、私の投稿 5つの機能; 3. 使用したい場合は、購入する前に WeChat 支払いを有効にする必要があります。
ExcelアイコンをPPTスライドに挿入する方法
Mar 26, 2024 pm 05:40 PM
1. PPT を開き、Excel アイコンを挿入する必要があるページに移動します。 「挿入」タブをクリックします。 2. ［オブジェクト］をクリックします。 3. 次のダイアログボックスが表示されます。 4. [ファイルから作成]をクリックし、[参照]をクリックします。 5. 挿入する Excel テーブルを選択します。 6. [OK] をクリックすると、次のページが表示されます。 7. [アイコンで表示]にチェックを入れます。 8. 「OK」をクリックします。
iPhoneのホーム画面から削除を元に戻す方法
Apr 17, 2024 pm 07:37 PM
ホーム画面から重要なものを削除してしまい、元に戻そうとしていますか?さまざまな方法でアプリのアイコンを画面に戻すことができます。 iPhoneでホーム画面から削除を元に戻す方法 前述したように、iPhoneでこの変更を復元する方法はいくつかあります。方法 1 – App ライブラリのアプリ アイコンを置き換える App ライブラリから直接ホーム画面にアプリ アイコンを配置できます。ステップ 1 – 横にスワイプして、アプリ ライブラリ内のすべてのアプリを見つけます。ステップ 2 – 前に削除したアプリのアイコンを見つけます。ステップ 3 – アプリのアイコンをメインライブラリからホーム画面上の正しい場所にドラッグするだけです。これが応用図です
Kali Linuxのデフォルトのひげメニューアイコンを変更するにはどうすればよいですか?
Jan 04, 2024 am 09:05 AM
KaliLinux でひげメニュー ボタンのアイコンを変更するには? 今日は、Linux システムでひげメニュー ボタンのアイコンを変更するチュートリアルを見ていきます。 1. デフォルトのひげメニューアイコンは下図のとおりです。 2. ウィスパラーのメニューアイコンを右クリックし、[プロパティ]を選択します。 3. [パネルボタン]タブに切り替え、[アイコン]オプションを見つけてクリックします。 4. 新しいウィンドウで、好きなアイコンをクリックします。 5. 選択が完了したら、[閉じる]をクリックして設定を終了します。 6. 新しく変更されたウィスカー メニュー ボタン アイコンが表示されます。
